有没有办法根据不同的数据向我的力导向图中添加不同的形状？

Question

我确定这里的另一个问题已经涵盖了这个问题，但是，在我的代码上尝试了许多不同的示例之后，我似乎无法让它工作。

我试图根据节点的名称使我的力导向图上的节点具有不同的形状，例如，如果节点名为 'Switch'，它应该显示为正方形。

我已经根据数据制定了更改节点颜色的设置，并且想要类似的形状，但无法使用 d3.v4 使其工作。

有什么帮助吗？

var color = d3.scaleOrdinal(d3.schemeCategory10);
var shape = d3.symbolTypes;

var node = g.append("g")
 .attr("class", "nodes")
 .selectAll("circle")
 .data(graph.nodes)
 .enter().append("circle")
 .attr("r", 15)
 .attr("fill", function(d) { return color(d.group); })
 .attr("d", d3.symbol()
   .type(function (d) { return shape(d.name);}))
 .call(d3.drag()
 .on("start", dragstarted)
 .on("drag", dragged)
 .on("end", dragended));

非常感谢

王菲

Answer 1

您不能使用：

var shape = d3.symbolTypes;
....
shape(d.name);

因为 d3.symbolTypes 在 d3 v4 中没有定义（它在 v3 的某些版本中），在 v4 中使用 d3.symbols 这是一个数组而不是函数。

但是，与颜色一样，您可以为形状创建序数标度：

var color = d3.scaleOrdinal(d3.schemeCategory20);
var shape = d3.scaleOrdinal(d3.symbols);

现在您所要做的就是附加该形状：

.append('path')
     .attr("d", d3.symbol().type( function(d) { return shape(d[property]);} ) );

由于您添加了圆圈，现在添加了路径，因此您需要更改 .append('circle')，并且由于圆圈具有 cx cy 个元素，因此您需要更改为设置位置的变换。

这是一个bl.ock which should show this in practice, based on MBostock's force directed graph (here)

请记住 d3.symbols 数组中只有七个形状。

编辑：如果您想根据属性指定为每个节点显示哪些形状（而不是让序数比例设置形状），您可以向包含名称的数据添加属性形状（例如：d3.symbolCross），或创建一个函数，它接收一个数据值并输出一个符号的名称。但是序数量表是最简单的。

有没有办法根据不同的数据向我的力导向图中添加不同的形状？

Is there a way to add different shapes depending on different data to my force-directed graph?

javascript

symbols

d3.js