D3JS花瓣/花卉图表。如何适应使用数据

Question

我想杰里米·斯塔基相适应的“动画花”块

http://bl.ocks.org/herrstucki/6199768/23f51b97bd942f6b1b7cf0b9ba76ada4cb6d1cc7

创建基于数据的单一，非动画的花，我提供了每个花瓣的大小。

创建使用此拨弄由脚本生成数据的单个花： https://jsfiddle.net/NovasTaylor/f91ujcfp/

花瓣的数目应根据在所提供的数据行（myPetalData）的数量 - 即应该是比较容易。

var myPetalData = [ 
{id:0, size:1, petLen:1, petWid:0.25}, 
{id:1, size:2, petLen:1, petWid:0.5}, 
{id:2, size:2.5, petLen:1, petWid:0.6}, 
{id:3, size:5, petLen:1, petWid:1.0} 
] 

我的主要问题是如何提供数据的个人花瓣（我仍然在学习Javascript和D3）的建设。 花瓣可以基于myPetalsData中指定的'size'变量，或者理想情况下是长度和宽度变量petLen，petWid的组合。 Size或Len + Wid应该被编码为D3Scales以适应真实世界的数据。除非花瓣构建需要，否则我还希望删除网格依赖关系。

对于那些对Javascript和D3基本掌握的人来说，这应该是一件容易的事。我会很感激任何建议或更新的小提琴让我沿着正确的道路前进。

谢谢！

添

Answer 1

可能像

var width = 500, 
 
    height = 500, 
 
    halfRadius = 50; // length of petal & therefore size of digram overall 
 

 
var size = d3.scale.sqrt() 
 
    .domain([0, 1]) 
 
    .range([0, halfRadius]); 
 

 
var myPetalData = [ 
 
{id:0, size:1}, 
 
{id:1, size:2}, 
 
{id:2, size:2.5}, 
 
{id:3, size:.1} 
 
] 
 

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

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

 
var petal = svg.selectAll(".petal") 
 
    .data(pie(myPetalData)) 
 
    .enter().append("path") 
 
    .attr("class", "petal") 
 
    .attr("transform", function(d) { return r((d.startAngle + d.endAngle)/2); }) 
 
    .attr("d", petalPath) 
 
    .style("stroke", petalStroke) 
 
    .style("fill", petalFill); 
 

 
function petalPath(d) { 
 
    var angle = (d.endAngle - d.startAngle)/2, 
 
     s = polarToCartesian(-angle, halfRadius), 
 
     e = polarToCartesian(angle, halfRadius), 
 
     r = size(d.data.size), 
 
     m = {x: halfRadius + r, y: 0}, 
 
     c1 = {x: halfRadius + r/2, y: s.y}, 
 
     c2 = {x: halfRadius + r/2, y: e.y}; 
 
    return "M0,0L" + s.x + "," + s.y + "Q" + c1.x + "," + c1.y + " " + m.x + "," + m.y + "L" + m.x + "," + m.y + "Q" + c2.x + "," + c2.y + " " + e.x + "," + e.y + "Z"; 
 
}; 
 

 
function petalFill(d, i) { 
 
    return d3.hcl(i/myPetalData.length * 360, 60, 70); 
 
}; 
 

 
function petalStroke(d, i) { 
 
    return d3.hcl(i/myPetalData.length * 360, 60, 40); 
 
}; 
 

 
function r(angle) { 
 
    return "rotate(" + (angle/Math.PI * 180) + ")"; 
 
} 
 

 
function polarToCartesian(angle, radius) { 
 
    return { 
 
    x: Math.cos(angle) * radius, 
 
    y: Math.sin(angle) * radius 
 
    }; 
 
};

注意，我为中心的馅饼和我删除petLen/petWid因为它，你如何期望这些涉及到的我不清楚花瓣大小...