d3 饼图和圆环图

Question

我找到了这个 fiddle http://jsfiddle.net/Qh9X5/1196/</code></p> <p>它基本上是一个圆环图，我想要实现的是圆环图中的饼图： <a href="http://jsfiddle.net/rfcee/q3z88wfx/1/" rel="nofollow">http://jsfiddle.net/rfcee/q3z88wfx/1/</a><code>

但它无法正确呈现。这是可能吗？谢谢！

Answer 1

var dataset = {
  apples: [53245, 28479, 19697, 24037, 40245],
    pear:[53245, 28479]
};
var dataset2 = {
    apples:[53245, 28479, 19697, 24037, 40245]
};
var width = 300,
    height = 300,
    radius = Math.min(width, height) / 2;

var color = d3.scale.category20();

var pie = d3.layout.pie()
    .sort(null);

var piedata = pie(dataset.apples);
var piedata2 = pie(dataset2.apples);

var arc = d3.svg.arc()
    .innerRadius(radius - 100)
    .outerRadius(radius - 50);
var arc2 = d3.svg.arc()
    .innerRadius(0)
    .outerRadius(radius-110);


var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");


var path2 = svg.selectAll("g").append("g").attr("id","pie")
    .data(piedata)
  .enter().append("path")
    .attr("fill", function(d, i) {
        return color(i); 
    })
    .attr("d", arc2);
        
var path = svg.selectAll("g").append("g").attr("id","donut")
    .data(piedata2)
  .enter().append("path")
    .attr("fill", function(d, i) {
        return color(i); 
    })
    .attr("d", arc);



svg.selectAll("text").data(piedata)
    .enter()
    .append("text")
    .attr("text-anchor", "middle")
    .attr("x", function(d) {
        var a = d.startAngle + (d.endAngle - d.startAngle)/2 - Math.PI/2;
        d.cx = Math.cos(a) * (radius - 75);
        return d.x = Math.cos(a) * (radius - 20);
    })
    .attr("y", function(d) {
        var a = d.startAngle + (d.endAngle - d.startAngle)/2 - Math.PI/2;
        d.cy = Math.sin(a) * (radius - 75);
        return d.y = Math.sin(a) * (radius - 20);
    })
    .text(function(d) { return d.value; })
    .each(function(d) {
        var bbox = this.getBBox();
        d.sx = d.x - bbox.width/2 - 2;
        d.ox = d.x + bbox.width/2 + 2;
        d.sy = d.oy = d.y + 5;
    });

svg.append("defs").append("marker")
    .attr("id", "circ")
    .attr("markerWidth", 6)
    .attr("markerHeight", 6)
    .attr("refX", 1)
    .attr("refY", 1)
    .append("circle")
    .attr("cx", 0)
    .attr("cy", 0)
    .attr("r", 0);

svg.selectAll("path.pointer").data(piedata).enter()
    .append("path")
    .attr("class", "pointer")
    .style("fill", "none")
    .style("stroke", "black")
    .attr("marker-end", "url(#circ)")
    .attr("d", function(d) {
        if(d.cx > d.ox) {
            return "M" + d.sx + "," + d.sy + "L" + d.ox + "," + d.oy + " " + d.cx + "," + d.cy;
        } else {
            return "M" + d.ox + "," + d.oy + "L" + d.sx + "," + d.sy + " " + d.cx + "," + d.cy;
        }
    });

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: auto;
  position: relative;
  width: 960px;
}

text {
  font: 10px sans-serif;
}

form {
  position: absolute;
  right: 10px;
  top: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

我想你是在找这个....

Answer 2

当你这样做时：

var path2 = svg.selectAll("path")
    .data(piedata2)
  .enter().append("path")
    .attr("fill", function(d, i) { return color(i); })
    .attr("d", arc2);

var path = svg.selectAll("path")
    .data(piedata)
  .enter().append("path")
    .attr("fill", function(d, i) { return color(i); })
    .attr("d", arc);

您将数据绑定到同一个 DOM 元素，第二个 .data 覆盖了第一个中的一些数据。

简单的解决方法是将其分成两个单独的 g:

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)

var g1 = svg
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var g2 = svg
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var path = g1.selectAll("path")
    .data(piedata)
    ...

var path2 = g2.selectAll("path")
    .data(piedata2)
    ...

已更新 fiddle。

d3 饼图和圆环图

d3 pie and donut charts

d3.js

pie-chart

donut-chart