Question

我正在尝试使用两种形状作为节点制作力图：rect和circle，形状信息位于d.shape。有几个主题，但解决方案对我来说不是很清楚。

我首先尝试使用merge方法，但这不起作用：在此jsbin中，var circlesANDrects = rects显示矩形，var circlesANDrects = circles显示圆圈，而var circlesANDrects = circles.merge(rects)并不显示两者。

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

否则，我认为理念解决方案是根据形状信息使用一个块和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。根据{{3}}：

如果指定的类型是字符串，则将此类型的新元素（标记名称）附加为每个所选元素的最后一个子元素[...]否则，该类型可以是针对每个所选元素计算的函数

问题是，如果你使用一个函数，你不能简单地返回“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...

因为它有点复杂，一个更简单的解决方案（但不完全遵循你的要求）只是在这里使用API：

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：symbol

Answer 2

因此，通过理解强制布局中的tick方法。 tick方法是每次更新时的强制回调。因此，我们需要在您的情况下单独更新rect和circle。因为，您创建了圆圈和rect并将其存储为两个变量。

您的代码的工作版本位于：https://jsbin.com/disayafube/1/edit?html,output

添加不同的形状

2 个答案: