向 D3.js 饼图添加图例答案

【问题标题】：Adding a legend to a D3.js pie chart向 D3.js 饼图添加图例
【发布时间】：2016-10-27 20:55:37
【问题描述】：

我有一个 d3.js 饼图

这是代码

<!DOCTYPE html>
<meta charset="utf-8">

<script src="https://d3js.org/d3.v3.min.js"></script>
<script>

var piecolors = d3.scale.category20c();

var w = 600,
    h = 460,
    r = (Math.min(w, h) - 50) / 2;


var dataFile = ".\\temp\\" + "<%=justOutFile.toString() %>";
d3.csv(dataFile, function(error, data) {

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

    var arc = d3.svg.arc()
        .outerRadius(r)
        .innerRadius(2);

    var labelArc = d3.svg.arc()
        .outerRadius(r-100)
        .innerRadius(r-5);

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

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

    pie.append("path")
      .attr("d", arc)
          .attr("data-legend", function(d){return d.data.BUSINESS_UNIT_GROUP})
      .style("fill", function(d) { return piecolors(d.data.BUSINESS_UNIT_GROUP); });

    pie.append("text")
      .attr("transform", function(d) { 
        var midAngle = d.endAngle < Math.PI ? d.startAngle/2 + d.endAngle/2 : d.startAngle/2  + d.endAngle/2 + Math.PI ;
        return "translate(" + labelArc.centroid(d)[0] + "," + labelArc.centroid(d)[1] + ") rotate(-90) rotate(" + (midAngle * 180/Math.PI) + ")"; })
      .attr("dy", ".35em")
      .attr('text-anchor','middle')
          .style("font-size", "12px")
          .style("font-weight", "900")
          .style("font", "sans-serif")
      .text(function(d) { return d.data.Distinct_Count + " " + d.data.BUSINESS_UNIT_GROUP  + " " + d.data.PERCENTAGE + "%"; });

legend = svgPie.append("g")
            .attr("class", "legend")
            .attr("transform", "translate(50,30)")
            .style("font-size", "12px")
            .call(d3.legend)
});

</script>

<style>
.legend rect {
 fill:white;
 stroke:black;
 opacity:0.8; }


body {
  font: 10px 'Open sans', sans-serif;
}

.line {
  fill: none;
  stroke: black;
  stroke-width: 1.2px;
}

div#chart {width: 100%;}

</style>

<body>
<div id="chart"></div>
</body>

我想要做的是，在我的饼图两侧添加一个图例到目前为止我尝试的所有示例，我都不明白。谁能帮我创造一个传奇。我不确定我是否使用最佳实践构建了饼图，如果是这样，请告诉我。

【问题讨论】：

stackoverflow.com/questions/20675617/…
是的，我看到了那个，但我似乎在分配 legend = svg.append("g") 的部分有问题，不确定我的代码与我的代码有什么关系我试过 svgPie.append( "g") 和 svgPie.append("pie") 我得到错误
无法获取未定义或空引用的属性“setProperty”

标签： javascript d3.js

【解决方案1】：

d3 没有提供名为legend 的方法。因此，您的.call(d3.legend) 行将失败。

但是，您可以自己构建d3.legend。 Here's an example from GitHub user ZJONSSON。如果您使用他的代码，请不要忘记感谢他。

如果你对他的代码不满意，你可以自己轻松完成：

var legend = svg.selectAll('.legend-entry').data(data)
  .enter().append('g')
    .attr('class', 'legend-entry')

legend.append('rect')
  .attr('class', 'legend-rect')
  .attr('x', 0)
  .attr('y', function (d, i) { return i * 20 })
  .attr('width', 10)
  .attr('height', 10)
  .attr('fill', function (d) {
    return piecolors(d.data.BUSINESS_UNIT_GROUP)
   })

legend.append('text')
  .attr('class', 'legend-text')
  .attr('x', 25)
  .attr('y', function (d, i) { return i * 20 })
  .text(function (d) {
    return d.data.BUSINESS_UNIT_GROUP
  })

添加一些样式，你就有了一个相当不错的图例。如果在每个元素上添加一些点击处理程序，还可以实现过滤功能。

【讨论】：

是的，我看到现在它没有添加任何运气但是我无法弄清楚图例 = 部分是如何工作的，我应该在我的代码中连接到什么
您是否关注他的instructions 并向您的细分添加data-legend 属性？
@j.doezer 如果你没有运气让他的代码工作，我已经添加了一些示例代码来构建一个简单的图例。它基本上是一个结合了文本元素的矩形。
pie.append("path") .attr("d", arc) .attr("data-legend", function(d){return d.data.BUSINESS_UNIT_GROUP}) .style( “填充”，函数（d）{返回piecolors（d.data.BUSINESS_UNIT_GROUP）；}）；
Aaaagghhh 我是个白痴，legend=svgPie.append("g")n 是正确的，实际问题是我有 d3.legend.js 但忘记将代码粘贴到其中:(现在它正在工作，谢谢大家