使用d3中的force布局,我可以愉快地添加节点,例如,一个圆圈的SVG组和一些文本:
var node = vis.selectAll(".node")
.data(nodes)
.enter().append("svg:g")
.attr("class", "node");
node.append("svg:circle")
.attr("r", 5);
node.append("svg:text")
.text(function(d) { return d.nodetext });
但是,我希望可选向组中添加另一个元素,这取决于节点数据:所以如果此节点的数据包含“image”属性,我想添加一个新的子元素(svg:image)。将svg:image添加到所有节点很容易(我只是这样做,因为我已经完成了上面的圆圈和文本)。动态更改已创建元素的属性也很容易(通过将函数作为属性的值,按照上面的text
)。仅当数据包含svg:image
属性时,我才知道如何添加image
子元素。实现这一目标的最佳方式是什么?
答案 0 :(得分:10)
node.filter(function(d) { return d.image; }).append("image")
.attr("xlink:href", function(d) { return d.image; })
.attr("width", 16)
.attr("height", 16);