Question

我通过几个不同的网站教自己D3，以帮助让我的数据看起来更有趣（当然！），我觉得我有基础知识。

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

我已经包含了以下代码，并感谢任何帮助。

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

干杯，

乔治

stylesheet.css

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>

在同一页上的两个甜甜圈图表

1 个答案: