为d3强制布局添加不同的形状

时间:2013-06-13 16:24:57

标签: d3.js force-layout

我正在尝试为我的d3力布局添加不同的形状,但不成功。最终目标是根据节点对象本身的属性确定形状。我正在使用selection.enter()然后.append()这样的形状。由于强制定向布局只占用一个节点数组,而.append()接受字符串而不是函数

node = vis.selectAll('.node')
    .data(nodes, function(d) {
        return d.filename
    });

...然后

node.enter()
    .append(**'rect'**) //I need to vary this based on node properties
    .attr('class', function(d) { 
        return 'node ' + d.entityType;
        //return d.entityType;
    });

我不确定实现这一目标的最佳方法。提前感谢您的帮助。

1 个答案:

答案 0 :(得分:1)

我认为插入svg路径而不是rects或circle会更容易。它非常灵活,您可以添加任何您能想到的力图表形状。

以下代码绘制了一个明星。 http://jsfiddle.net/UkeMS/

enter image description here

<svg>
    <path  d="
        m 100 100
        l 23 12
        l -4 -26
        l 19 -19
        l -27 -4
        l -11 -23
        l -12 23
        l -27 4
        l 19 19
        l -4 26
        l 24 -12
    "/>
</svg>

请记住使用小写字母的相对坐标(如上所示)声明路径,而不是使用大写字母的绝对坐标。