逐个节点设置 SVG 基本形状

Question

（这里是 D3 初学者）

我有以下sn-p：

// myShape (node) group
// NB: the function arg is crucial here! nodes are known by id, not by index!
myShape = myShape.data(nodes, function(d) { return d.nodeId; });

// update existing nodes (reflexive & selected visual states)
myShape.selectAll('circle')
    .style('fill', function(d) { return (d === selected_node) ? d3.rgb(colors(d.nodeType)).brighter().toString() : colors(d.nodeType); })
    .classed('reflexive', function(d) { return d.reflexive; });

// add new nodes
var g = myShape.enter().append('svg:g');

g.append('svg:circle')
    .attr('r', 12)

但我想让它更灵活：我想使用圆和多边形，而不是只使用圆圈。这将在 d: 中的一个属性中选择：

var d = [
    { nodeId: 1, nodeType : 'type1' , shape: 'circle' },
    { nodeId: 2, nodeType : 'type2' , shape: 'triangle' },
];

这意味着，取决于 d.shape。我必须设置 'svg:circle' 或 'svg:polygon'，然后设置半径（对于圆）或点（对于多边形）。我试图像这样设置 svg 形状：

g.append(function (d) { 
    if (d.shape === 'circle' ) { return 'svg:circle'; } 
    else { return 'svg:polygon'; } } )

但这不起作用：我得到一个：

Uncaught Error: NotFoundError: DOM Exception 8

似乎append 不接受函数？如何逐个节点设置 svg 形状？

编辑

我准备了这个jsbin 来展示我想要做什么。

Answer 1

在最近的 D3 版本中，您可以append 函数调用结果的元素。也就是说，您可以传递一个对要添加的元素求值的函数，而不是传递静态名称。

它的工作方式与您使用它的方式不太一样——仅从函数中返回元素的名称是不够的。而不是

g.append(function (d) { return svgShape(d); })

svgShape 返回一个字符串，你需要做类似的事情

g.append(function(d) {
  return document.createElementNS("http://www.w3.org/2000/svg", svgShape(d));
})

并创建相应的形状。我已经更新了你的 jsbin here 来演示一下。

在您的情况下，始终附加 path 并更改行生成器（即 d 属性值）可能更容易。也就是说，对于圆形，您将传入一个返回圆形路径的函数，对于多边形，您将传入一个返回特定多边形路径的函数等。