Question

我正在尝试使用力布局，其中有两种类型的形状：圆形和三角形。但是，我收到错误 - 无法读取未定义的属性“符号”。这是相关的代码段：

var shape = {"action": "circle", "why-hard": "triangle"};    

var node = g.append("g")
    .attr("class", "nodes")
    .selectAll("circle")
    .data(graph.nodes)
    .enter().append("circle")
    .attr("d", d3.svg.symbol().type(function(d) { return shape[d.type]; }))

Answer 1

您可能正在使用d3v4。 D3v4有许多命名空间更改，会破坏v3中的代码，看起来您的符号代码来自v3。在这个例子中：

.attr("d", d3.svg.symbol().type(function(d) { return shape[d.type]; }))

会在Chrome中提供错误： Uncaught TypeError: Cannot read property 'symbol' of undefined （如上所述），以及Firefox中的 d3.svg is undefined 。相反，对于v4，请尝试以下方式：

 .attr("d", d3.symbol().type(d3.symbolCross));

要在v4中动态分配类型，方法与您的方法基本相同：

 .attr("d", d3.symbol().type( function(d,i) { return d3.symbols[i];} ) )

请参阅小提琴here。

有关形状的v4文档，请参阅https://github.com/d3/d3-shape/blob/master/README.md#symbol。

根据D3力布局中的数据不同的形状

1 个答案: