D3js 圆环图图例

Question

I want to add a legend to my D3js donut chart, like this post , its supposed to be kind of simple but I can't get it and I don't know what I'm doing wrong, also the console is not throwing any errors, anyone can see the error?

my data comes from a csv and looks like this:

data = [{
    value: 30,
    key: "Alta"
  }, {
    value: 37,
    key: "Media"
  }, {
    value: 15,
    key: "Moderada"
  }, {
    value: 8,
    key: "Baja"
  },
  {
    value: 13,
    key: "Muy baja"
  },
]

and this is the part that adds the data to the chart:

var margin = {top: 20, right: 20, bottom: 20, left: 20},
    width = 500 - margin.right - margin.left,
    height = 500 - margin.top - margin.bottom,
    radius = width/2;

var color = d3.scaleOrdinal()
    .range(["#B4DC70", "#FEFE2B", "#FE8E2B", "#FE2B2B", "#2B5EFE"]);

// arc generator    
var arc = d3.arc()
    .outerRadius(radius - 10)
    .innerRadius(radius - 70);

// generate pie chart and donut chart
var pie = d3.pie()
    .sort(null)
    .value(function(d) { return d.value; });

// define the svg for pie chart
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

d3.csv("alertas.csv", function(error, data) {
    if (error) throw error;

    var amenazasCount = d3.nest()
        .key(function(d) { return d.TEXTO_AMENAZA; })
        .rollup(function(v) { return v.length; })
        .entries(data);

    amenazasCount.forEach(function(d) {
        d.value = +d.value;
    });

    var g = svg.selectAll(".arc")
        .data(pie(amenazasCount))
        .enter().append("g")
        .attr("class", "arc");

    // append path 
    g.append("path")
        .attr("d", arc)
        .style("fill", function(d) { return color(d.data.key); });

    var legendG = svg.selectAll(".legend")
        .data(pie(amenazasCount))
        .enter().append("g")
        .attr("transform", function(d,i){
            return "translate(" + (width - 110) + "," + (i * 15 + 20) + ")";
      })
      .attr("class", "legend");   

    legendG.append("rect")
      .attr("width", 10)
      .attr("height", 10)
      .attr("fill",  function(d) { return color(d.data.key); });

        legendG.append("text")
      .text(function(d){ 
        return d.value + "  " + d.data.key;
      })
      .style("font-size", 12)
      .attr("y", 10)
      .attr("x", 11);

});

Answer 1

The SVG and G elements are not sized correctly or consistently with the margins you had defined, so that legend was positioned too far to the right, and outside of the SVG view.

If you set up your SVG and g elements like this then it will work:

// set a width and height inclusive of the margins    
var svg = d3.select("body").append("svg")
        .attr("width", width + margin.right + margin.left)
        .attr("height", height + margin.top + margin.bottom)

// create a parent g element for everything to be included within     
var g = svg.append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// position the pie half of the width and height    
var pieG = svg.selectAll(".arc")
        .data(pie(data))
        .enter().append("g")
        .attr("transform", "translate(" + width/2 + "," + height/2 + ")")
        .attr("class", "arc");

And then append the legendG to the "g" element:

var legendG = g.selectAll(".legend")
        .data(legendData)
        .enter()
        .append("g")
        .attr("transform", function(d,i){
            return "translate(" + (width - 60) + "," + (i * 15 + 20) + ")";
        })
        .attr("class", "legend");