javascript - 重叠图例 d3.js

Question

我正在用三 Angular 形创建图例。一个是"is"，另一个是“否”。通过运行下面的代码，它会生成两个三 Angular 形，但它们是重叠的。我尝试使用这行代码 .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 属性而不是路径。并且也不需要对文本和路径的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>