逐节点设置SVG基本形状 [英] Setting the SVG basic shape on a node-by-node basis

问题描述

(这里是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的属性中选择:

But I would like to make this more flexible: instead of using only circles, I would like to use circles and polygons. This will be selected in a property in d:

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

根据d.shape的含义.我必须设置"svg:circle"或"svg:polygon"，然后设置半径(对于圆)或点(对于多边形).我试图像这样设置svg形状:

Which means that, depending on d.shape. I must set 'svg:circle' or 'svg:polygon', and then set the radius (for the circle) or the points (for the polygons). I have tried to set the svg shape like this:

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

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

But this is not working: I am getting a:

Uncaught Error: NotFoundError: DOM Exception 8

似乎append不接受功能?如何在逐个节点的基础上设置svg形状?

It seems append does not accept a function? How can I set the svg shape on a node-by-node basis?

我已经准备好了 jsbin 来显示我想要做什么.

I have prepared this jsbin to show what I want to do.

推荐答案

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

In recent versions of D3, you can append elements that are the results of function calls. That is, instead of passing a static name, you can pass a function that evaluates to the element to add.

它不能完全按照您使用的方式工作-从函数中返回元素的名称还不够.代替

It doesn't quite work the way you're using it -- it's not enough to return the name of the element from the function. Instead of

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

其中svgShape返回一个字符串，您需要执行类似的操作

where svgShape returns a string, you need to do something like

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

，将创建​​相应的形状.我已经在此处更新了您的jsbin以进行演示.

and the corresponding shape will be created. I've updated your jsbin here to demonstrate.

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

In your case, it might be easier to always append a path and vary the line generator, i.e. the d attribute value. That is, for a circle you would pass in a function that returns a circular path, for a polygon a function that returns the particular polygon path etc.

这篇关于逐节点设置SVG基本形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！