D3.js 如何基于形状字段值向D3强制有向图添加两个不同的形状？

我是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 }
  ]
}

若形状值为1，则绘制圆形，若形状值为0，则绘制矩形。 力定向图示例链接为：

---

我已经尝试了示例链接JSFiddle:

您可以这样做，如中所示，例如，对于特定形状，使用and

路径

元素而不是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);

然后还需要更改

勾选

处理程序，以更改

路径

元素的

转换

属性：

node.attr("transform", function(d) {
    return "translate(" + d.x + "," + d.y + ")";
});

---

完成JSFIDLE。

讨论您要寻找的内容。还有，嗨，拉尔斯。。。我试过这么做，但我不知道如何传递圆而不是三角形的参数，而且这些符号和边不相邻。请试着帮我画圆圈。我的JSFiddle链接：这里的答案也适用于你的问题：谢谢Lars…你让我开心。我可以执行类似.enter（）.append（函数（d）{add span或div或任何取决于数据的东西；}）的操作吗？I get NotFoundError:未能在“Node”上执行“appendChild”：当我尝试返回使用jQueryIt创建的元素时，新的子元素为空。最好单独问一个问题，您可以提供更多详细信息。d3.v4使用的更正

d3.symbol（）.size（…）.type（…）