Question

我有一个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>

我想要做的是，在我的饼图的任一侧添加一个图例到目前为止我尝试的所有例子，我都不明白。有人可以帮我创建一个传奇。我不确定我是否使用最佳实践构建了饼图，如果是这种情况，请告诉我。

Answer 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
  })

添加一些造型，你有一个相当不错的传奇。如果在每个元素上添加一些单击处理程序，则还可以实现过滤函数。

将图例添加到D3.js饼图中

1 个答案: