javascript - 如何在 d3 饼图中添加漂亮的图例-6ren

javascript - 如何在 d3 饼图中添加漂亮的图例

转载作者：行者123 更新时间：2023-12-04 17:46:39

我的饼图工作正常，但我想添加一个像这样的漂亮图例(用 mspaint 制作)

但不能让它工作......

这是我的饼图代码(没有图例部分):

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
</head>

<body>
  <script>
    var newData = [{
        count: 1,
        emote: "OneTwoThree"
      }, {
        count: 1,
        emote: "FourFiveSix"
      }, {
        count: 1,
        emote: "SevenEightNine"
      }, {
        count: 15,
        emote: "TenElevenTwelve"
      },

    ]

    // Define size & radius of donut pie chart
    var width = 450,
      height = 800,
      radius = Math.min(width, height) / 2;

    // Define arc colours
    var colour = d3.scale.category20();

    // Define arc ranges
    var arcText = d3.scale.ordinal()
      .rangeRoundBands([0, width], .1, .3);

    // Determine size of arcs
    var arc = d3.svg.arc()
      .innerRadius(radius - 130)
      .outerRadius(radius - 10);

    // Create the donut pie chart layout
    var pie = d3.layout.pie()
      .value(function(d) {
        return d.count;
      })
      .sort(null);

    // Append SVG attributes and append g to the SVG
    var mySvg = d3.select('body').append("svg")
      .attr("width", width)
      .attr("height", height);

    var svg = mySvg
      .append("g")
      .attr("transform", "translate(" + radius + "," + radius + ")");

    var svgText = mySvg
      .append("g")
      .attr("transform", "translate(" + radius + "," + radius + ")");

    // Define inner circle
    svg.append("circle")
      .attr("cx", 0)
      .attr("cy", 0)
      .attr("r", 100)
      .attr("fill", "#fff");

    // Calculate SVG paths and fill in the colours
    var g = svg.selectAll(".arc")
      .data(pie(newData))
      .enter().append("g")
      .attr("class", "arc");

    // Append the path to each g
    g.append("path")
      .attr("d", arc)
      //.attr("data-legend", function(d, i){ return parseInt(newData[i].count) + ' ' + newData[i].emote; })
      .attr("fill", function(d, i) {
        return colour(i);
      });

    var textG = svg.selectAll(".labels")
      .data(pie(newData))
      .enter().append("g")
      .attr("class", "labels");

    // Append text labels to each arc
    textG.append("text")
      .attr("transform", function(d) {
        return "translate(" + arc.centroid(d) + ")";
      })
      .attr("dy", ".35em")
      .style("text-anchor", "middle")
      .attr("fill", "#fff")
      .text(function(d, i) {
        return d.data.count > 0 ? d.data.emote : '';
      });
  </script>
</body>

</html>

最佳答案

我很惊讶没有更多的这种“股票”例子。

这是一个与您的数据看起来不错的快速图例:

// again rebind for legend
var legendG = mySvg.selectAll(".legend") // note appending it to mySvg and not svg to make positioning easier
  .data(pie(newData))
  .enter().append("g")
  .attr("transform", function(d,i){
    return "translate(" + (width - 110) + "," + (i * 15 + 20) + ")"; // place each legend on the right and bump each one down 15 pixels
  })
  .attr("class", "legend");   

legendG.append("rect") // make a matching color rect
  .attr("width", 10)
  .attr("height", 10)
  .attr("fill", function(d, i) {
    return colour(i);
  });

legendG.append("text") // add the text
  .text(function(d){
    return d.value + "  " + d.data.emote;
  })
  .style("font-size", 12)
  .attr("y", 10)
  .attr("x", 11);

完整示例:

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
</head>

<body>
  <script>
    var newData = [{
        count: 1,
        emote: "OneTwoThree"
      }, {
        count: 1,
        emote: "FourFiveSix"
      }, {
        count: 1,
        emote: "SevenEightNine"
      }, {
        count: 15,
        emote: "TenElevenTwelve"
      },

    ]

    // Define size & radius of donut pie chart
    var width = 450,
      height = 800,
      radius = Math.min(width, height) / 2.5;

    // Define arc colours
    var colour = d3.scale.category20();

    // Define arc ranges
    var arcText = d3.scale.ordinal()
      .rangeRoundBands([0, width], .1, .3);

    // Determine size of arcs
    var arc = d3.svg.arc()
      .innerRadius(radius - 130)
      .outerRadius(radius - 10);

    // Create the donut pie chart layout
    var pie = d3.layout.pie()
      .value(function(d) {
        return d.count;
      })
      .sort(null);

    // Append SVG attributes and append g to the SVG
    var mySvg = d3.select('body').append("svg")
      .attr("width", width)
      .attr("height", height);

    var svg = mySvg
      .append("g")
      .attr("transform", "translate(" + radius + "," + radius + ")");

    var svgText = mySvg
      .append("g")
      .attr("transform", "translate(" + radius + "," + radius + ")");

    // Define inner circle
    svg.append("circle")
      .attr("cx", 0)
      .attr("cy", 0)
      .attr("r", 100)
      .attr("fill", "#fff");

    // Calculate SVG paths and fill in the colours
    var g = svg.selectAll(".arc")
      .data(pie(newData))
      .enter().append("g")
      .attr("class", "arc");

    // Append the path to each g
    g.append("path")
      .attr("d", arc)
      //.attr("data-legend", function(d, i){ return parseInt(newData[i].count) + ' ' + newData[i].emote; })
      .attr("fill", function(d, i) {
        return colour(i);
      });

    var textG = svg.selectAll(".labels")
      .data(pie(newData))
      .enter().append("g")
      .attr("class", "labels");

    // Append text labels to each arc
    textG.append("text")
      .attr("transform", function(d) {
        return "translate(" + arc.centroid(d) + ")";
      })
      .attr("dy", ".35em")
      .style("text-anchor", "middle")
      .attr("fill", "#fff")
      .text(function(d, i) {
        return d.data.count > 0 ? d.data.emote : '';
      });
    
    var legendG = mySvg.selectAll(".legend")
      .data(pie(newData))
      .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, i) {
        return colour(i);
      });
    
    legendG.append("text")
      .text(function(d){
        return d.value + "  " + d.data.emote;
      })
      .style("font-size", 12)
      .attr("y", 10)
      .attr("x", 11);
    
    
  </script>
</body>

</html>

关于javascript - 如何在 d3 饼图中添加漂亮的图例，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32298837/

文章推荐： jsp - sitemesh 与 jsp-config ()

文章推荐： c# - 如何使用 asp.net core/react 发布数据

文章推荐： scala - Spark 和 Scala : Apply a function to each element of an RDD

文章推荐： sql - SQL中的反向工程和正向工程有什么区别

javascript - 高(饼)图计算不正确
有人可以帮我理解为什么我的饼图百分比计算不正确吗？看截图: 根据我的计算，如 RHS 上所示，支出百分比应为 24.73%。传递给 Highcharts 的值如下:- 花费:204827099.36-
jquery - highcharts donut 饼 - 数据的颜色与其向下钻取的颜色不同
我正在制作圆环饼图。我设置数据的颜色并获取钻取(它是保存外部切片的数据和配置的对象)切片的颜色为同一组颜色。我想设置要在向下钻取对象中使用的不同颜色数组。请参阅附图(外层切片有两种颜色:橙色和透明)

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何在 d3 饼图中添加漂亮的图例