在 d3 中添加多个形状

Question

我想根据 json 文件中的一个属性添加不同的形状。我发现迈克采用了这种方法： https://groups.google.com/forum/#!topic/d3-js/4EJDu1xOh8Y

这个想法很棒，我只是不确定如何适应它。我要么想添加一个圆圈，要么添加一个 svg:use 元素（使用 attr("xlink:href")）。他们都有（当然）不同的属性。那我该怎么做呢？我要附加什么？在示例中，还使用了 attr("d") ，我是否也需要它？这就是我到目前为止所拥有的，但我不确定在哪里添加什么。非常感谢您的帮助！

var type = d3.scale.ordinal()
  .domain(["Q", "C"])
  .range("circle","svg:use");

for(l=0;l<4;l++){

  currentsvg.selectAll("path")
    .data(queryArray[l])
    .enter()
    .append("svg:path")      
    .type(function(d,i) { 
        if (queryArray[l][i].name.substr(0,1) == "Q"){
         return type("Q");   
        }
        else if (queryArray[l][i].name.substr(0,1) == "C"){
          return type("C");   
        }
     });
}

Answer 1

做到这一点的最佳方法是在创建形状之前，将数据按照您想要的方式过滤到每个形状的单独数据集中。然后您可以使用该新数据集创建形状。

var data = ["Q","Q","Q","C","C","Q","Q","C","Q","C"];

var circleSet = data.filter(function(d){return d === "Q";}),
    squareSet = data.filter(function(d){return d === "C";});

正如拉尔斯所说，这也不是 d 属性的工作方式。这是整个工作的 JSFiddle。

Answer 2

下面是一个不带过滤的不同解决方案，它使用路径绘制形状。它不使用 svg 的 "rect" 或 "circle" 而是仅使用路径来绘制形状。查看 here for more on paths. Note that the circle is two connecting arcs. It also classes each shape based on the data so you can have different colors, etc using CSS. Here is a fiddle。

currentsvg.selectAll("path")
    .data(data)
    .enter()
    .append("path")
    .attr("d",function(d,i){
        var path,
            s = i*50,
            r = 10,
            w = r*2;    
        if (data[i] == "Q"){
         path =  "M" + s + " " + s + " L" + s + " " + (s+w) +
             " L" + (s+w) + " " + (s+w) + " L" + (s+w) + " " + s + "Z" 
        }
        else if (data[i] == "C"){
         path =  "M" + s + " " + s + " m" + -r + ", 0 " +
             " a " + r + "," + r + " 0 1,0 " + r*2 + ",0" + 
             " a " + r + "," + r + " 0 1,0 "+ -r*2 + ",0"
        }
        return path;       
    })
    .attr("class", function(d){return d == "Q" ? "rec" : "circ";})

在 d3 中添加多个形状

Adding multiple shapes in d3

svg

d3.js