javascript - 添加不同的形状

Question

我正在尝试制作一个以两种形状作为节点的力图:rect和 circle ，形状信息在d.shape中.那里有几个线程，但解决方案对我来说不是很清楚。

我首先尝试使用 merge方法，不起作用:在这个jsbin , var circlesANDrects = rects显示矩形和 var circlesANDrects = circles显示圆圈，而 var circlesANDrects = circles.merge(rects)不显示两者。

有人知道如何解决这个问题吗？

否则，我认为理想的解决方案是使用一个 block 和 append根据形状信息的不同形状:

var circlesANDrects = svg.append("g").selectAll("rect circle")
.data(force.nodes())
.enter()
<!-- a function that appends different shapes according to shape information -->

有谁知道如何将案例/条件添加到 append ？

Answer 1

您可以将函数作为参数传递给append。根据API :

If the specified type is a string, appends a new element of this type (tag name) as the last child of each selected element [...] Otherwise, the type may be a function which is evaluated for each selected element

问题是，如果你使用一个函数，你不能像这样简单地返回“circle”或“rect”:

.append(function(d){
    if(d.shape == "rect"){ 
        return "rect";
    } else {
        return "circle";
    }
});//this don't work...

相反，您必须返回 DOM 元素，如下所示:

.append(function(d){
    if(d.shape == "rect"){ 
        return document.createElementNS("http://www.w3.org/2000/svg", "rect");
    } else { 
        return document.createElementNS("http://www.w3.org/2000/svg", "circle");
    }
});//this works...

因为它有点复杂，一个更简单的解决方案(但不完全按照您的要求)是简单地使用 symbol这里:

var circlesOrRects = svg.append("g").selectAll(".foo")
    .data(force.nodes())
    .enter()
    .append("path")
    .attr("d", d3.svg.symbol()
    .type(function(d) { return d.shape == "rect" ? "circle" : "square"; }))
    .call(force.drag);

这是您的 Bin:https://jsbin.com/povuwulipu/1/edit