追加不同的形状

我想用两种形状的节点作为力图：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？

来源

2016-11-16 SoftTimur

您可以将一个函数作为参数传递给append。按照API：

如果指定的类型是一个字符串，追加这种类型（标签名称）的每个所选元素的最后一个子一个新的元素[...]否则，类型可以是这是每个选定的元素评估功能

的问题是，如果你使用一个功能，你不能简单地返回“圈子”或“矩形”，像这样：

.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);

这是你斌：https://jsbin.com/povuwulipu/1/edit

来源

2016-11-16 14:18:35

但如果我要指定一些'attr'什么（例如，'width'和'height'）属于'rect'但不'circle' ？ – SoftTimur

不幸的是，“方形”符号没有“宽度”或“高度”，只是“大小”。但是你可以使用一个函数来设置不同符号的大小（圆形，方形等）。 –

那么我们只能在这里指定圆和方的常见属性？ – SoftTimur