d3.js - 同一页面上的两个圆环图-6ren

d3.js - 同一页面上的两个圆环图

转载作者：行者123 更新时间：2023-12-04 16:12:09

我正在通过几个不同的网站自学 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>

最佳答案

如果将所有内容都包装在一个接受两个参数的函数中，则可以删除大量重复代码，即用于创建 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>

关于d3.js - 同一页面上的两个圆环图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48777239/

文章推荐： chart.js - angular-chart.js 基于图表标签值的自定义颜色

文章推荐： chart.js - 如何在 Angular 5 中创建堆叠圆环图

文章推荐： r - foreach() 垃圾收集

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

d3.js - 同一页面上的两个圆环图