我有一个圆环图,里面有五个不同的弧形.数据不会更新,但我希望在页面加载时将整个图形转换为圆形,从选定的角度开始(在我的情况下为1.1*PI).这是图的jsfiddle:http://jsfiddle.net/Nw62g/
var data = [ {name: "one", value: 10375}, {name: "two", value: 7615}, {name: "three", value: 832}, {name: "four", value: 516}, {name: "five", value: 491} ]; var margin = {top: 20, right: 20, bottom: 20, left: 20}; width = 400 - margin.left - margin.right; height = width - margin.top - margin.bottom; var chart = d3.select("body") .append('svg') .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + ((width/2)+margin.left) + "," + ((height/2)+margin.top) + ")"); var radius = Math.min(width, height) / 2; var color = d3.scale.ordinal() .range(["#3399FF", "#5DAEF8", "#86C3FA", "#ADD6FB", "#D6EBFD"]); var arc = d3.svg.arc() .outerRadius(radius) .innerRadius(radius - 20); var pie = d3.layout.pie() .sort(null) .startAngle(1.1*Math.PI) .endAngle(3.1*Math.PI) .value(function(d) { return d.value; }); var g = chart.selectAll(".arc") .data(pie(data)) .enter().append("g") .attr("class", "arc"); g.append("path") .style("fill", function(d) { return color(d.data.name); }) .attr("d", arc);
我将如何实现这一结果?