[英]d3 circle pack: setting circle colors
在您提到的示例中,圆圈颜色在此处定义:
.style("fill", function(d) { return fill(d.packageName); });
这里, d
是绑定到圆的数据。
在这个例子中,函数传递一个对象( d
packageName属性)而不是颜色。
根据选定的色标,每个对象都会分配给它自己的唯一颜色:
fill = d3.scale.category20c();
如果您对使用的着色标准(packageName)感到满意,并且您需要更改颜色,则可以更改调色板(颜色标度):
https://github.com/mbostock/d3/wiki/Ordinal-Scales
如果要更改着色标准,则需要更改返回部分,将其替换为颜色值作为数据d
的函数。
在这里你可以找到D3颜色构造函数:
https://github.com/mbostock/d3/wiki/Colors
您可以更改数据的json文件并调整d3代码以指定填充每个单独气泡的颜色。
下面是我的数据,你可以看到我正在指定填充气泡的颜色。
{
"name": "sentiment",
"children": [
{
"name": "positive",
"children": [
{
"name": "iphone", "size": 2000, "color": "green"
}
]
}
]
}
然后,我将我指定的颜色属性添加到节点对象中,以便稍后可以在d3函数中访问它。
function recurse(name, node) {
if (node.children) node.children.forEach(function(child) {
recurse(node.name, child);
});
else classes.push({
packageName: name,
className: node.name,
value: node.size,
color: node.color
});
}
然后找到负责着色气泡的功能并编辑填充功能。
node.append("circle")
.attr("r", function(d) { return d.r; })
.style("fill", function(d) { return d.color; });
我的代码是根据http://bl.ocks.org/mbostock/4063269给出的代码编辑的
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.