Javascript 每个圆环的颜色不同-D3圆环包装
我已经做了气泡图。但我不会给每个泡泡换不同的颜色。我怎么能这么做?我怎样才能给每个圆圈赋予不同的颜色?具有最高值的圆数据应始终位于被其他气泡包围的中心 片段:Javascript 每个圆环的颜色不同-D3圆环包装,javascript,svg,d3.js,colors,circle-pack,Javascript,Svg,D3.js,Colors,Circle Pack,我已经做了气泡图。但我不会给每个泡泡换不同的颜色。我怎么能这么做?我怎样才能给每个圆圈赋予不同的颜色?具有最高值的圆数据应始终位于被其他气泡包围的中心 片段: var diameter = 200, format = d3.format(",d"), color = ["#7b6888", "#ccc", "#aaa", "#6b486b"]; var bubble = d3.layout.pack() .size([diameter, diameter]); var svg = d
var diameter = 200,
format = d3.format(",d"),
color = ["#7b6888", "#ccc", "#aaa", "#6b486b"];
var bubble = d3.layout.pack()
.size([diameter, diameter]);
var svg = d3.select("#bubbleCharts").append("svg")
.attr("width", diameter + 10)
.attr("height", diameter)
.attr("class", "bubble");
var a;
d3.json("flare.json", function(error, root) {
var node = svg.selectAll(".node")
.data(bubble.nodes(classes(root))
.filter(function(d) { return !d.children; }))
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + d.x + 20 + "," + d.y + ")"; });
node.append("circle")
.attr("r", function(d) { return d.r+ 7; })
.style("fill", function(d) {
for(a in color){
return color[a]; };} );
node.append("text")
.attr("dy", ".3em")
.style("text-anchor", "middle")
.text(function(d) { return d.value+"%"; });
});
function classes(root) {
var classes = [];
function recurse(name, node) {
if (node.children) node.children.forEach(function(child) { recurse(node.name, child); });
else classes.push({packageName: name, value: node.value});
}
recurse(null, root);
return {children: classes};
}
我的数据是:
{
"name": "Spending Activity",
"children": [
{"name": "Petrol", "value": 60},
{"name": "Travel", "value": 10},
{"name": "Medical", "value": 25},
{"name": "Shopping", "value": 5}
]
}
您可能需要一个色标来获得填充颜色:
var colour = d3.scale.category20();
然后您可以如下设置填充颜色:
node.append("circle")
.attr("r", function(d) { return d.r+ 7; })
.style("fill", function(d, i) { return colour(i); });
至于节点的位置,组件布局不提供任何影响该位置的功能,即,您不能强制特定的圆位于中心。在选择内置D3颜色集时,此参考卡可能很方便: 或者,您可以使用colorbrewer颜色集:(参见示例)
在填充函数中,尝试传递d&i,然后返回颜色[i]。哦,你可能不得不使用attr而不是style(我不记得了)。我们怎样才能在这个气泡图中添加图例?这是一个完全不同的问题。这取决于你想要什么样的图例等等。我正在显示圆圈内的值。我需要这些名字作为传奇。例如,在上面提供的数据中,如果值为60,我需要在图例中使用该名称“汽油”。谢谢,如果你把它作为一个单独的问题发布,并附上演示你尝试过的代码,可能会更好。