javascript - D3 两个圆环图相互叠加，不同的数据集。 JavaScript/HTML

我想做的是让两个图表显示在同一字段中，一个显示工作时间与空闲时间，另一个图表显示机器当前是工作还是空闲。

我希望显示机器空转的图表比第一个小并适合它。我已经能够制作这两个图表，但我无法按照我想要的方式将它们组合起来。

这是我的代码:

<!DOCTYPE html>
<html lang="en">
 <div id="chart-center-jc1" align="center"></div>
 <!--this line control location of the SVG chart-->



<script src="d3/d3.v3.min.js"></script>

<script>

var radius = 80,
padding = 10;
var radius2 = 25,
padding = 10;

var color = d3.scale.ordinal()
.range([ "#fc0303", "#21d525", "#d0cece", "#a05d56", "#d0743c", "#ff8c00"]);

var arc = d3.svg.arc()
.outerRadius(radius)
.innerRadius(radius - 30);

var arc2 = d3.svg.arc()
.outerRadius(radius2)
.innerRadius(radius2 - 25);

var pie = d3.layout.pie()
.sort(null)
.value(function(d) { return d.population; });

var pie2 = d3.layout.pie()
.sort(null)
.value(function(d) { return d.population; });

d3.csv("M1 Summary.csv", function(error, data) {
 if (error) throw error;

  color.domain(d3.keys(data[0]).filter(function(key) { return key !=="Machine"; }));

  data.forEach(function(d) {
    d.ages = color.domain().map(function(name) {
      return {name: name, population: +d[name]};
    });
  });

  var legend = d3.select("#chart-center-jc1").append("svg")
  .attr("class", "legend")
  .attr("width", radius * 2)
  .attr("height", radius * 2)
  .selectAll("g")
  .data(color.domain().slice().reverse())
.enter().append("g")
  .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

   legend.append("rect")
  .attr("width", 18)
  .attr("height", 18)
  .style("fill", color);

   legend.append("text")
  .attr("x", 24)
  .attr("y", 9)
  .attr("dy", ".35em")
  .text(function(d) { return d; });

  var svg = d3.select("#chart-center-jc1").selectAll(".pie")
  .data(data)
  .enter().append("svg")
  .attr("class", "pie2")
  .attr("width", radius * 2)
  .attr("height", radius * 3)
  .append("g")
  .attr("transform", "translate(" + radius + "," + radius + ")");


  svg.selectAll(".arc")
  .data(function(d) { return pie(d.ages); })
  .enter().append("path")
  .attr("class", "arc")
  .attr("d", arc)
  .style("fill", function(d) { return color(d.data.name); });


  svg.selectAll(".arc2")
  .data(function(d) { return pie2(d.ages); })
  .enter().append("path")
  .attr("class", "arc2")
  .attr("d", arc2)
  .style("fill", function(d) { return color(d.data.name); });
  });

最佳答案

关键是将一个 svg 附加到另一个上:

var svg = d3.select("#chart-center-jc1").append("svg")
  .attr("width", radius * 2)
  .attr("height", radius * 3)
  .attr("class","outerPie")
  .append("g")
  .attr("transform", "translate(" + radius + "," + radius + ")");

var svg2 = d3.select(".outerPie").append("svg")
  .attr("width", radius * 2)
  .attr("height", radius * 3)
  .attr("class","innerPie")
  .append("g")
  .attr("transform", "translate(" + radius + "," + radius + ")");

请注意，两个 svgs 具有相同的高度、宽度和平移。这是因为它们彼此重叠，并且您希望将第二个放在第一个的中心。

参见fiddle以获得完整的解决方案。

关于javascript - D3 两个圆环图相互叠加，不同的数据集。 JavaScript/HTML，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42789147/

javascript - D3 两个圆环图相互叠加，不同的数据集。 JavaScript/HTML

上一篇：javascript - 在 AngularJS 中调用模态指令后 $scope 变量会重置

下一篇：javascript - 使用循环将国家/地区添加到 google.visualization.DataTable()