文章/答案/技术大牛

发布

社区首页 >问答首页 >在D3.js饼图中添加一个图例

问在D3.js饼图中添加一个图例
EN

Stack Overflow用户

提问于 2016-10-27 20:55:37

回答 1查看 1.9K关注 0票数 0

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

我想做的是，在我的饼图的两边加上一个图例，所有我试过的例子，我都不明白。有人能帮我创造一个传奇吗。我不确定我是否使用最佳实践构建了饼图，如果是这样的话，请告诉我。

javascript

d3.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-10-28 14:31:18

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

但是，您可以自己构建d3.legend。下面是GitHub用户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
  })

加上一些造型，你有一个相当体面的传奇。如果在每个元素上添加一些单击处理程序，还可以实现一个筛选器函数。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/40294049

复制

相似问题

问在D3.js饼图中添加一个图例
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在D3.js饼图中添加一个图例EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在D3.js饼图中添加一个图例
EN