Question

我要做的是让两个图表显示在同一个字段中，一个显示工作时间与闲置时间，另一个图表显示机器当前是否正在工作或空转

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

这是我的代码：

<!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); });
  });

Answer 1

关键是将一个svg附加到另一个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。

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

1 个答案: