好......
我在以下网址中使用此示例(http://bl.ocks.org/mbostock/7607535 ):
我的问题是,当插入多个圆圈时,主圆圈没有被正确填充,因为一种提升被创造出来,我的老板想要打印圆圈。
我留下代码和截图!
var margin = 10,
outerDiameter = 1000,
innerDiameter = outerDiameter - margin - margin;
var x = d3.scale.linear()
.range([0, innerDiameter]);
var y = d3.scale.linear()
.range([0, innerDiameter]);
var color = d3.scale.linear()
.domain([-1, 5])
.range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"])
.interpolate(d3.interpolateHcl);
var pack = d3.layout.pack()
.padding(0.5)
.size([innerDiameter, innerDiameter])
.value(function(d) { return d.size; })
var svg = d3.select("#chart4").append("svg")
.attr("width", outerDiameter)
.attr("height", outerDiameter)
.append("g")
.attr("transform", "translate(" + margin + "," + margin + ")");
nodes = pack.nodes(testHeatMap);
svg.append("g").selectAll("circle")
.data(nodes)
.enter().append("circle")
//.attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; })
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.attr("r", function(d) { return d.r; })
.style("fill", function(d,i){
if(d.color)
return d.color
else if(d.children[0].color)
return d.children[0].color
else return d.children[0].children[i].color
})
.style("fill-opacity", "0.25")
.style("stroke", function (){ return "rgb(31, 119, 180)"})
.style("stroke-width", "1px")
d3.select(self.frameElement).style("height", outerDiameter + "px");