D3js 圆环图图例

Question

我想在我的 D3js 圆环图中添加一个图例，例如 this post，它应该很简单，但我无法理解，我不知道我做错了什么，还有控制台没有抛出任何错误，任何人都可以看到错误？

我的数据来自 csv，如下所示：

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

这是将数据添加到图表的部分：

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

SVG 和 G 元素的大小不正确或与您定义的边距不一致，因此图例位置太靠右，超出了 SVG 视图。

如果你像这样设置你的 SVG 和 g 元素，那么它会起作用：

// 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");

然后将legendG附加到“g”元素：

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");