D3，SVG和Javascript：需要为动态创建的节点分配唯一的图像 [英] D3, SVG, and Javascript : Need to assign unique images to dynamically created nodes
问题描述
我正在使用以下Javascript + SVG + D3代码。
http：/ /bl.ocks.org/1095795
I'm playing with the following Javascript + SVG + D3 code.
http://bl.ocks.org/1095795
代码在这里：
https://gist.github.com/1095727
总之，我需要独特的图片每个节点（而不是重复的笑脸的图像，因为它拉现在），但我不够聪明，足以使它发生。任何帮助将不胜感激。
In short, I need unique images for each node (instead of the duplicated smiley face image as it's pulling now), but I'm not savvy enough to make it happen. Any help would be appreciated.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js"></script>
<style type="text/css">
.link { stroke: #ccc; }
.nodetext { pointer-events: none; font: 10px sans-serif; }
</style>
</head>
<body>
<script type="text/javascript">
var w = 960,
h = 500
var nodes = [],
links = [];
var vis = d3.select("body").append("svg:svg")
.attr("width", w)
.attr("height", h);
var force = self.force = d3.layout.force()
.nodes(nodes)
.links(links)
.gravity(.05)
.distance(100)
.charge(-100)
.size([w, h]);
force.on("tick", function() {
var node = vis.selectAll("g.node")
.data(nodes, function(d) { return d.id;} )
var link = vis.selectAll("line.link")
.data(links, function(d) { return d.source.id + ',' + d.target.id})
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
});
function recalc() {
var link = vis.selectAll("line.link")
.data(links, function(l) { return l.source.id + '-' + l.target.id; });
link.enter().append("svg:line")
.attr("class", "link")
.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
link.exit().remove();
var node = vis.selectAll("g.node")
.data(nodes, function(d) { return d.dpid;}).call(force.drag);
var nodeEnter = node.enter().append("svg:g")
.attr("class", "node")
.call(force.drag);
nodeEnter.append("svg:image")
.attr("class", "circle")
.attr("xlink:href", "https://d3nwyuy0nl342s.cloudfront.net/images/icons/public.png")
.attr("x", "-8px")
.attr("y", "-8px")
.attr("width", "16px")
.attr("height", "16px");
nodeEnter.append("svg:text")
.attr("class", "nodetext")
.attr("dx", 12)
.attr("dy", ".35em")
.text(function(d) { return d.id });
node.exit().remove();
force.start();
}
/* Scenario */
/* step 1: add three nodes and three links */
function step1() {
var nA = {id: 'aaa'};
var nB = {id: 'bbb'};
var nC = {id: 'ccc'};
nodes.push(nA);
nodes.push(nB);
nodes.push(nC);
var lAB = {source: nA, target: nB};
var lAC = {source: nA, target: nC};
var lBC = {source: nB, target: nC};
links.push(lAB );
links.push(lAC);
links.push(lBC);
recalc();
}
/* step 2: node B disappears with links */
function step2() {
nodes = nodes.filter(function(n) { return n.id !== 'bbb'; });
links = links.filter(function(l) { return (l.source.id !== 'bbb' && l.target.id !== 'bbb'); });
recalc();
}
/* step 3: node B reappears with links */
function step3() {
var nB = {id: 'bbb'};
nodes.push(nB);
/* find exiting nodes for links */
var nA = nodes.filter(function(n) { return n.id === 'aaa'; })[0];
var nC = nodes.filter(function(n) { return n.id === 'ccc'; })[0];
var lAB = {source: nA, target: nB};
var lBC = {source: nB, target: nC};
links.push(lAB);
links.push(lBC);
recalc();
}
window.setTimeout(step1, 2000);
window.setTimeout(step2, 4000);
window.setTimeout(step3, 6000);
force.start();
recalc();
</script>
</body>
</html>
推荐答案
看起来您正在尝试添加不同的
It looks like you're trying to add a different image for each node, instead of the one image added here:
nodeEnter.append("svg:image")
.attr("class", "circle")
.attr("xlink:href", "https://d3nwyuy0nl342s.cloudfront.net/images/icons/public.png")
这会在节点创建时添加图像，这听起来像是足以满足您的需要。所有你需要做的是提供一个函数，而不是相关的 .attr（）调用的字符串。如果您有一个要使用的图片网址数组，您可以按如下顺序获取它们：
This adds the image at node creation time, which sounds like it would be sufficient for your purposes. All you need to do is supply a function instead of a string for the relevant .attr() call. If you had an array of image URLs to use, you could get them in sequence like this:
nodeEnter.append("svg:image")
.attr("class", "circle")
.attr("xlink:href", function(d, i) {
// d is the node data, i is the index of the node
return myImages[i];
})
或者，如果您在节点数据本身中有图片网址：
or, if you had image URLs in the node data itself:
nodeEnter.append("svg:image")
.attr("class", "circle")
.attr("xlink:href", function(d, i) {
// d is the node data, i is the index of the node
return d.nodeImageUrl;
})
这篇关于D3，SVG和Javascript：需要为动态创建的节点分配唯一的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
