同一页上的两个圆环图

Question

我正在通过几个不同的网站自学 D3，以帮助使我的数据看起来更有趣（当然！），我觉得我已经掌握了基础知识。

但我正在努力弄清楚如何将两个圆环图放在同一页面上。我希望它们完全相同，除了数据和定位。

我已经包含了下面的代码，如果有任何帮助，我们将不胜感激。

正如我所说，如何获取图表的代码将完全相同，所以希望我没有重复太多的项目（并希望删除我发现的一些不良做法）。

干杯，

乔治

Donut Chart 

<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <title>Pie sort</title>
</head>

<style>

  text {
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    fill: white;
    text-anchor: middle;
 }

  .container1 {
     float: left;
 }

  .container2 {
    float: right;
 }

 </style>

 <body>


    <script src="https://d3js.org/d3.v4.min.js"></script>
    <div class="container1" id="svg1"></div>
    <div class="container2" id="svg2"></div>
    <script>

    var mentalHealth1 = [{
    City: 'Brighton',
    Percentage: 1.77
    }, {
    City: 'Bristol',
    Percentage: 1.16
    }, {
    City: 'Luton',
    Percentage: 1.04
    }, {
    City: 'Milton Keynes',
    Percentage: 0.93
    }, {
    City: 'Southampton',
    Percentage: 1.37
   }];

   var mentalHealth2 = [{
   City: 'Bradford City',
   Percentage: 1.22
   }, {
   City: 'Leeds',
   Percentage: 1.31
   }, {
   City: 'Liverpool',
   Percentage: 1.56
   }, {
   City: 'Manchester',
   Percentage: 1.41
   }, {
   City: 'Sheffield',
   Percentage: 1.24
   }];

   draw("svg1", mentalHealth1);
   draw("svg2", mentalHealth2);

   function draw(selector, data) {
      var color = d3.scaleOrdinal()
        .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56"]);

   var mentalHealthPie = d3.pie()
      .value(function(d) {
      return d.Percentage
   })
   .sort(function(a, b) {
      return a.City.localeCompare(b.City);
   });

  var arcGenerator = d3.arc()
     .innerRadius(150)
     .outerRadius(175);

  var arcData = mentalHealthPie(data);

  var svg = d3.select("#svg1")
    .append("svg")
    .attr("width", 1000)
    .attr("height", 450)
    .append("g")
    .attr("transform", "translate(200,200)");

  var svg = d3.select("#svg2")
    .append("svg")
    .attr("width", 1000)
    .attr("height", 450)
    .append("g")
    .attr("transform", "translate(400,200)");

  svg.selectAll(null)
    .data(arcData)
    .enter()
    .append('path')
    .style("fill", function(d) {
       return color(d.data.Percentage);
    })
    .style("stroke", "white")
    .attr('d', arcGenerator);
  }
  </script>
</body>
</html>

Answer 1

如果将所有内容包装在接受两个参数的函数中，您可以删除大量重复代码，用于创建 SVG 的选择器和数据数组，这是您比较代码时唯一不同的元素。

function draw(selector, data){
    //code here...
};

然后，你调用它两次：

draw("svg1", mentalHealth1);
draw("svg2", mentalHealth2);

在这种情况下，HTML 有两个 div，具有这些 ID：

<div id="svg1"></div>
<div id="svg2"></div>

这样你就有了一个 DRYer 代码，你可以调用多少次。

这是演示：

var mentalHealth1 = [{
  City: 'Brighton',
  Percentage: 1.77
}, {
  City: 'Bristol',
  Percentage: 1.16
}, {
  City: 'Luton',
  Percentage: 1.04
}, {
  City: 'Milton Keynes',
  Percentage: 0.93
}, {
  City: 'Southampton',
  Percentage: 1.37
}];

var mentalHealth2 = [{
  City: 'Bradford City',
  Percentage: 1.22
}, {
  City: 'Leeds',
  Percentage: 1.31
}, {
  City: 'Liverpool',
  Percentage: 1.56
}, {
  City: 'Manchester',
  Percentage: 1.41
}, {
  City: 'Sheffield',
  Percentage: 1.24
}];

var color = d3.scaleOrdinal()
  .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56"]);

var mentalHealthPie = d3.pie()
  .value(function(d) {
    return d.Percentage
  })
  .sort(function(a, b) {
    return a.City.localeCompare(b.City);
  });

var arcGenerator = d3.arc()
  .innerRadius(150)
  .outerRadius(200);

draw("svg1", mentalHealth1);
draw("svg2", mentalHealth2);

function draw(selector, data) {

  var arcData = mentalHealthPie(data);

  var svg = d3.select("#" + selector)
    .append("svg")
    .attr("width", 500)
    .attr("height", 500)
    .append("g")
    .attr("transform", "translate(250,250)")

  svg.selectAll(null)
    .data(arcData)
    .enter()
    .append('path')
    .style("fill", function(d) {
      return color(d.data.Percentage);
    })
    .style("stroke", "white")
    .attr('d', arcGenerator);
}

<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="svg1"></div>
<div id="svg2"></div>

同一页上的两个圆环图

Two Donut Charts On The Same Page

d3.js

donut-chart