d3.js - 如何根据形状场值向 D3 力有向图添加两种不同的形状？

Question

我是 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/

Answer 1

您可以执行此操作，例如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 .