我是 D3 的新手。我正在使用力有向图。我想在节点的位置添加两种不同类型的形状。
我的json如下:
{
"nodes":[
{"name":"00:00:00:00:00:00:00:01","group":0,"shape":1},
{"name":"00:00:00:00:00:00:00:02","group":1,"shape":1},
{"name":"00:00:00:00:00:00:00:03","group":2,"shape":1},
{"name":"00:00:00:00:00:00:00:11","group":0,"shape":0},
{"name":"00:00:00:00:00:00:00:21","group":1,"shape":0},
{"name":"00:00:00:00:00:00:00:31","group":2,"shape":0},
{"name":"00:00:00:00:00:00:00:32","group":2,"shape":0},
{"name":"00:00:00:00:00:00:00:12","group":0,"shape":0},
{"name":"00:00:00:00:00:00:00:22","group":1,"shape":0}
],
"links":[
{ "source": 0, "target": 0, "value": 5 },
{ "source": 1, "target": 1, "value": 5 },
{ "source": 2, "target": 2, "value": 5 },
{ "source": 3, "target": 0, "value": 5 },
{ "source": 4, "target": 1, "value": 5 },
{ "source": 5, "target": 2, "value": 5 },
{ "source": 6, "target": 2, "value": 5 },
{ "source": 7, "target": 0, "value": 5 },
{ "source": 8, "target": 1, "value": 5 }
]
}
如果shape值为1,则绘制圆形,如果shape值为0,则绘制矩形。
力有向图示例链接是:http://bl.ocks.org/mbostock/4062045
我已经尝试过示例链接 JSFiddle:http://jsfiddle.net/mayurchavda87/Sc2xC/3/
最佳答案
您可以执行此操作,例如this example ,通过使用 symbol generator和 path
元素而不是特定形状的 SVG 元素。添加形状的代码变为
var node = svg.selectAll(".node")
.data(data.nodes)
.enter().append("path")
.attr("class", "node")
.attr("d", d3.svg.symbol()
.type(function(d) { return d3.svg.symbolTypes[d.s]; }))
.style("fill", function(d) { return color(d.group); })
.call(force.drag);
那么你还需要更改你的
tick
处理程序更改 transform
path
的属性元素:node.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
完整的 jsfiddle here .
关于d3.js - 如何根据形状场值向 D3 力有向图添加两种不同的形状?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20114508/