逐节点设置SVG基本形状

Setting the SVG basic shape on a node-by-node basis

本文关键字：基本形 SVG 设置 节点      更新时间：2023-09-26

（此处为D3初学者）

我有以下片段：

// 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来展示我想要做的事情。

在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以进行演示。

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

相关文章：