Question

我正在尝试绘制一个带有图例的饼图。我陷入了麻烦，让它被绘制，因为我得到的错误有很多未定义的变量。我设法绘制图表本身和图例的一半，但不是正确的颜色，应该与饼图匹配。

 function drawPieChart(d3div, chart_data) {
    // chart_data.data is a list of data elements.
      // each should contain fields: val, col, name

    d3div.html(""); // clear the div
    var title = getopt(chart_data, 'title', '');

    // desired width and height of chart
    var w = getopt(chart_data, 'width', 300);
    var h = getopt(chart_data, 'height', 300);
    var pad = getopt(chart_data, 'pad', 50);
    var textmargin = getopt(chart_data, 'textmargin', 20);
    var r = Math.min(w, h) / 2 - pad; // radius of pie chart

    var div = d3div.append('div');
    if(title !== '') {
      div.append('p').attr('class', 'pietitle').text(title);
    }

    var arc = d3.svg.arc()
        .outerRadius(r)
        .cornerRadius(20)
        .innerRadius(150);

    var arcLarge = d3.svg.arc()
        .innerRadius(150)
      .cornerRadius(20)
        .outerRadius(r + 50);

    var toggleArc = function(p){
      p.state = !p.state;
    var dest = p.state ? arcLarge : arc;


    d3.select(this).select("path").transition()
      .duration(160)
      .attr("d", dest);};

      var pie = d3.layout.pie()
      .padAngle(.03)
      .sort(null)
      .value(function(d) { return d.val; });

    var svg = d3.select("#piechart").append("svg")
      .attr("width", w)
      .attr("height", h)
      .append("g")
      .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");

    var g = svg.selectAll(".arc")
      .data(pie(chart_data.data))
      .enter().append("g")
      .attr("class", "arc")
      .attr("stroke", "#999")
      .attr("id",function(d){return d.data;})
      .on("mouseover",toggleArc)
        .on("mouseout",toggleArc);

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





var color = d3.scale.category20b();
var legendRectSize = 18;
var legendSpacing = 4;
// FROM here the code is not produced the desired result
var legend = svg.selectAll('.legend')
  .data(chart_data.data)
  .enter()
  .append('g')
  .attr('class', 'legend')
  .attr("id",function(d){return d.data;})
  .attr('transform', function(d, i) {
    var height = legendRectSize + legendSpacing;
    var offset =  height * chart_data.data.length / 2;
    var horz = -2 * legendRectSize;
    var vert = i * height - offset;
    return 'translate(' + horz + ',' + vert + ')';
  });


      legend.append('rect')
      .data(chart_data.data)
  .attr('width', legendRectSize)
  .attr('height', legendRectSize)
  .style("fill", function(d) { return d.data.col; });

legend.append("text")
  .attr('x', legendRectSize + legendSpacing)
  .attr('y', legendRectSize - legendSpacing)
  .text(function(d) { return d.data.name; });


  }

代码实际上工作正常，直到行var legend = svg.selectAll('.legend')

然后我开始定义图例，但每当我尝试访问上面写的行（{也就是代码的最后一行）下面的d.data时，D3就抱怨未定义d.data。< / p>

我不明白我走错了路。

如果不是定义整个非工作部分（var legend ...）而是编写此代码：

g.append("text")
       .attr("stroke", "none")
      .attr("fill", function(d) { return d.data.col; })
      .text(function(d) { return d.data.name; });

我可以访问d.data.name.

不幸的是盒子的颜色不对而没有描述。谢谢！

将图例添加到D3js中的饼图

0 个答案: