Перекрывающая легенда d3.js

Question

Я создаю легенды с треугольными фигурами. Один - «Да», другой - «Нет». Запустив код ниже, он генерирует два треугольника, но они перекрываются. Я пытаюсь отделить их, используя эту строку кода .attr("y", function(d,i) {return 50+i*40;}), но похоже, что она не работает. Может ли кто-нибудь сказать мне, как это исправить? Благодаря! Click here! This is an html sreenshot for this part of script

var legendname = ["Yes","No"]; 
    var legend = svg.selectAll(".legend") 
       .data(legendname) 
       .enter().append("g") 
       .attr("class", "legend") 
       .attr("transform", function(d, i) { 
      return "translate(" + (w + 150) + "," + (m.t - 30) + ")"; 
      }); 

      legend.append("path") 
       .attr("d", d3.svg.symbol().type("triangle-up").size(128)) 
      *** .attr("y", function(d,i) {return 50+i*40;}) 
       .style('fill', function(d) {return color(d);}); 

      legend.append("text") 
       .attr("y", function(d,i) {return 50+i*20;}) 
       .attr("x", 30) 
       .text(function(d) { return d; }) 

Answer 1

Вам придется обновлять атрибут переводить у групп вместо путей. А также нет необходимости в дополнительных вычислениях для y атрибутов текстов и путей.

.attr("transform", function(d, i) { 
     return "translate(" + (w + 150) + "," + (30+i*40) + ")"; 
}); 

Рабочий фрагмент кода:

var w=40; //Sample chart width 
 
var color = d3.scale.category20c(); 
 
var svg = d3.select("body").append("svg").attr({ height: 500, width: 400 }); 
 

 
var legendname = ["Yes", "No"]; 
 
var legend = svg.selectAll(".legend") 
 
    .data(legendname) 
 
    .enter().append("g") 
 
    .attr("class", "legend") 
 
    .attr("transform", function(d, i) { 
 
    return "translate(" + (w + 150) + "," + (30+i*40) + ")"; 
 
    }); 
 

 
legend.append("path") 
 
    .attr("d", d3.svg.symbol().type("triangle-up").size(128)) 
 
    .style('fill', function(d,i) { 
 
    return color(i); 
 
    }); 
 

 
legend.append("text") 
 
    .attr("dx",10) 
 
    .attr("dy",".4em") 
 
    .text(function(d) { 
 
    return d; 
 
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>