使用相同的d3js代码制作两个饼图

Question

我有一个用 d3js 制作的饼图。

从 url 读取数据。

我想使用相同的代码生成图表，更改图表和数据的颜色，但我无法管理我该怎么做。在关于改变数据，唯一改变名字的变量是earth_footprint，也就是IHD.

这里是fiddle今天的代码。
在这个 fiddle 中有 div 我想要我的第二张图表的地方：
<div id="donut2"></div>
我想用于第二张图表的数据在 this link.

非常感谢！！

Answer 1

制作一个包含代码中所有内容的函数并进行两次函数调用

function drawChart(url, id, key) {
  d3.json(url)
    .then(function(data) {

    data = data.filter(dataPoint => dataPoint.year == 2015);

      const heightValue = 300;
      const widthValue = 600;
      const strokeWidth = 1.5;
      const margin = {
        top: 0,
        bottom: 20,
        left: 30,
        right: 20
      };
      var width = 600 - margin.left - margin.right - (strokeWidth * 2);
          var height = 250 - margin.top - margin.bottom;
          var radius = Math.min(width, height) / 2;

         var color = d3.scaleOrdinal()
              .range(["#e688a1", "#ed9a73", "#e3c878", "#64b2cd", "#e1b12c", "red", "green", "violet", "steelblue"]);

          var pie = d3.pie()
              .value(function(d) {
                  return d[key];
              })(data); 


           var arc = d3.arc()
              .outerRadius(radius - 10)
              .innerRadius(0);

          var svg =
              d3
              .select(id)
              .append("svg")
              .attr("viewBox", `0 0 ${widthValue} ${heightValue}`)
              .append("g")
              .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

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

  g.on('mouseover', function(d, i) {
                  d3.select(this).transition()
                      .duration('50')
                      .attr('opacity', '.95')
                      .attr("stroke", "#23374d")
                  g.append("text")
                      .attr("class", "text remove")
                      .style("text-anchor", "middle")
                      .attr("stroke", "#23374d")
                      .attr("fill", "#23374d")
                      .text(d.data.country_name)
              })
              .on('mouseout', function(d, i) {
                  d3.select(this).transition()
                      .duration('50')
                      .attr('opacity', '1')
                      .attr("stroke", "none")
                  g.select(".text.remove").remove();
              })
              .attr('transform', 'translate(0, 0)');

   g.append("path")
              .attr("d", arc)
              .style("fill", function(d) {
                  return color(d.data.country_name);
              });
   g
              .append("text")
              .attr("text-anchor", "middle")
              .attr("x", function(d) {
                  var a = d.startAngle + (d.endAngle - d.startAngle) / 2 - Math.PI / 2;
                  d.cx = Math.cos(a) * (radius - 45);
                  return d.x = Math.cos(a) * (radius + 30);
              })
              .attr("y", function(d) {
                  var a = d.startAngle + (d.endAngle - d.startAngle) / 2 - Math.PI / 2;
                  d.cy = Math.sin(a) * (radius - 12);
                  return d.y = Math.sin(a) * (radius - 5);
              })
              .text(function(d) {
                  return d.value.toFixed(2);
              })
              .each(function(d) {
                  var bbox = this.getBBox();
                  d.sx = d.x - bbox.width / 2 - 2;
                  d.ox = d.x + bbox.width / 2 + 2;
                  d.sy = d.oy = d.y + 5;
              });

      g.append("path")
              .attr("class", "pointer")
              .style("fill", "none")
              .style("stroke", "#2c3e50")
              .attr("d", function(d) {
                  if (d.cx > d.ox) {
                      return "M" + d.sx + "," + d.sy + "L" + d.ox + "," + d.oy + " " + d.cx + "," + d.cy;
                  } else {
                      return "M" + d.ox + "," + d.oy + "L" + d.sx + "," + d.sy + " " + d.cx + "," + d.cy;
                  }
              });



  });
}


drawChart("https://raw.githubusercontent.com/cvrnogueira/CODWorkData/master/database/topfive/biggestEarthFootprint.json", 
"#donut", 
"earth_footprint"
)
drawChart("https://raw.githubusercontent.com/cvrnogueira/CODWorkData/master/database/topfive/biggestIHD.json",
"#donut2", 
"IHD"
)

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <title>JS Bin</title>
  </head>

  <body>
    <div id="donut"></div>
    <br>
    <br>
    <div id="donut2"></div>
  </body>

</html>

因此您的函数现在采用 url、要加载的 ID 以及您要从数据中读取的键。

使用相同的d3js代码制作两个饼图

Make two pie charts with the same d3js code

reusability

d3.js