Добавление нескольких фигур в 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

Ниже представлено другое решение без фильтрации, которое использует путь для рисования фигур. Он не использует «прямой» или «круг» 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";}) 

Answer 2

Лучший способ сделать это, чтобы фильтровать данные, как вы хотите в отдельные наборы данных для каждой формы, прежде чем создавать формы. Затем вы можете создать фигуры с этим новым набором данных.

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 всего этого.