d3.js создавать объекты поверх друг друга

Question

я создаю прямоугольники в моем SVG элемент, используя этот код:

var rectangles = svg.selectAll("rect") 
     .data(dataset) 
     .enter() 
     .append("rect"); 

    rectangles.attr("x", function (d) { 
      return xScale(getDate(d)); 
      //return xScale(d.start); 
     }) 
     .attr("y", function (d, i) { 
      return (i * 33); 
     }) 
     .attr("height", 30) 
     .transition() 
     .duration(1000) 
     .attr("width", function (d) { 
      return d.length; 
     }) 
     .attr("rx", 5) 
     .attr("ry", 5) 
     .attr("class", "rectangle") 
     .attr("onclick", function (d) { 
      return "runaction(" + d.start + ")"; 
     }); 

Как я могу создать новые прямоугольники поверх предыдущих?

Answer 1

Это ответ на этот вопрос, который я получил от Скотта Мюррея, автора замечательных вводных уроков для d3.js http://alignedleft.com/tutorials/d3/, которые очень помогли мне с пониманием его функциональности. Надеюсь, он не возражает против того, чтобы я дал ему свой ответ для всеобщего блага.

Большое спасибо Скотту!

И да, это абсолютно возможно. Взяв ваш пример, предположим, вы хотите нарисовать один набор кругов с набором данных, называемым «giraffeData», связанным с ними. Вы могли бы использовать:

svg.selectAll("circle") 
    .data(giraffeData) 
    .enter() 
    .append("circle"); 

Но тогда у вас есть второй набор данных (на самом деле просто массив значений) под названием «zebraData». Таким образом, вы можете использовать один и тот же код, но изменить которые набор данных вы ссылаетесь здесь:

svg.selectAll("circle") 
    .data(zebraData) 
    .enter() 
    .append("circle"); 

Конечно, это будет неосторожно выбрать все вы уже созданные круги и связать новые данные к ним - что не совсем что ты хочешь. Таким образом, вы должны помочь D3 различать круги жирафа и круги зебры. Вы можете сделать это путем присвоения им классов:

svg.selectAll("circle.giraffe") 
    .data(giraffeData) 
    .enter() 
    .append("circle") 
    .attr("class", "giraffe"); 

svg.selectAll("circle.zebra") 
    .data(zebraData) 
    .enter() 
    .append("circle") 
    .attr("class", "zebra"); 

Или, вы можете сгруппировать круги каждого типа в элемент а отдельный SVG «г»:

var giraffes = svg.append("g") 
       .attr("class", "giraffe"); 

giraffes.selectAll("circle") 
    .data(giraffeData) 
    .enter() 
    .append("circle"); 

var zebras = svg.append("g") 
       .attr("class", "zebra"); 

zebras.selectAll("circle") 
    .data(zebraData) 
    .enter() 
    .append("circle"); 

я бы выбрал последнее, так как тогда ваш DOM более организован, и вам не нужно добавлять класс в каждый круг. Вы могли бы просто знать, что любой круг внутри g с классной зеброй - это «круг зебры».