D3.JS - 如何将网格线添加到我的饼图

问题描述：

我已将饼图示例扩展为：，饼图的半径因百分比而异。我想每20％添加一个网格线（圈），但我无法弄清楚如何。D3.JS - 如何将网格线添加到我的饼图

这里是更新CSV：

年龄，人口，百分之 < 5,2704659,67 5-13,4499890,38 14-17,2159981,91 18-24,3853788,49 25-44,14106543,71 45-64,8819342,88 = 65,612463,64

，这里是具有不同半径的饼状部分更新后的代码：

<!DOCTYPE html> 
<meta charset="utf-8"> 
<style> 

body { 
    font: 10px sans-serif; 
    background: #333; 
} 

.arc path { 
    stroke: #fff; 
    stroke-width: 2px; 
} 

.arc grid { 
    stroke: #fff; 
    stroke-width: 1; 
    stroke-dasharray: 5,5; 
} 

.arc text { 
    fill:#fff; 
    font-size:12px; 
    font-weight:bold; 
} 

.arc line { 
    stroke: #fff; 
} 

</style> 
<body> 
<script src="d3.js"></script> 
<script> 

var width = 960, 
    height = 500, 
    radius = Math.min(width, height)/2 - 10; 

var color = d3.scale.ordinal() 
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); 

var arc = d3.svg.arc() 
    .outerRadius(function(d) { return 50 + (radius - 50) * d.data.percent/100; }) 
    .innerRadius(20); 

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

var grid = d3.svg.area.radial() 
    .radius(150); 

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

d3.csv("data.csv", function(error, data) { 

    data.forEach(function(d) { 
    d.population = +d.population; 
    d.percent = d.percent; 
    }); 

    var g = svg.selectAll(".arc") 
     .data(pie(data)) 
    .enter().append("g") 
     .attr("class", "arc"); 

    g.append("path") 
     .attr("d", arc) 
     .style("fill", function(d) { return color(d.data.age); }); 

    g.append("text") 
     .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; }) 
     .attr("dy", ".35em") 
     .style("text-anchor", "middle") 
     .text(function(d) { return d.data.age; }); 

}); 

</script>

答

首先设置蜱数量：

var numTicks = 5; // Each tick is 20%

然后创建数据来创建网格线：

var sdat = []; 
for (i=0; i<=numTicks; i++) { 
    sdat[i] = (radius/numTicks) * i; 
}

然后你可以使用一个函数来创建径向网格线，你可以叫它从d3.csv块内：

addCircleAxes = function() { 
    var circleAxes, i; 

    svg.selectAll('.circle-ticks').remove(); 

    circleAxes = svg.selectAll('.circle-ticks') 
     .data(sdat) 
     .enter().append('svg:g') 
     .attr("class", "circle-ticks"); 

    // radial tick lines 
    circleAxes.append("svg:circle") 
     .attr("r", String) 
     .attr("class", "circle") 
     .style("stroke", "#CCC") 
     .style("opacity", 0.5) 
     .style("fill", "none"); 

    // Labels for each circle 
    circleAxes.append("svg:text") 
     .attr("text-anchor", "center") 
     .attr("dy", function(d) { return d - 5 }) 
     .style("fill", "#fff") 
     .text(function(d,i) { return i * (100/numTicks) }); 

};

一个例子是在这里：http://bl.ocks.org/3994129

（借来自：http://kreese.net/blog/2012/08/26/d3-js-creating-a-polar-area-diagram-radial-bar-chart/）

D3.JS - 如何将网格线添加到我的饼图

相关推荐