Question

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

这个想法很棒，我只是不确定如何适应它。我想要添加一个圆圈或一个svg：use元素（带attr（＆＃34; xlink：href＆＃34;））。他们都有（当然）不同的属性。那我该怎么做？我该追加什么？在示例中，还使用了attr（＆＃34; d＆＃34;），我是否也需要它？这是我到目前为止所做的，但我不确定在哪里添加。我真的很感谢你的帮助！

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";});

正如Lars所说，这也不是 d 属性的工作方式。这是整个事情的工作JSFiddle。

Answer 2

下面是一个不带过滤的不同解决方案，它使用绘制形状的路径。它没有使用＆＃34; rect＆＃34;或＆＃34;圈＆＃34; svg，而只是使用路径绘制形状。有关路径的更多信息，请查看here。请注意，圆是两个连接弧。它还根据数据对每个形状进行分类，以便您可以使用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中添加多个形状

2 个答案: