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

Question

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

我正在尝试根据节点的名称使我的力导向图上的节点具有不同的形状，例如，如果节点被命名为“开关”，它应该显示为正方形。

我已经制定了用于根据数据更改节点颜色的设置，并且希望对形状进行类似的设置，但无法使用 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，它应该在实践中显示这一点，基于 MBostock 的力有向图 (here)

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

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