javascript – 使用D3在JS中的不同圆圈CirclepackeR上需要不同的颜色
作者:互联网
我正在使用circlepackeR也是d3.js.我需要使用数组hexa中的颜色为每个叶节点着色.此数组的值将与我们将拥有的叶节点数相同.我没有发布整个flare数据函数,只发布了一个根及其子节点.
对此相关的任何建议将不胜感激.谢谢!
hexa = ["#FFFFFF00" "#FF000000" "#00FF0000" "#FF000000" "#FF000000"
"#00FF0000" "#00FF0000" "#00FF0000" "#FFFFFF00" "#FFFFFF00" "#FFFFFF00"
"#FF000000"];
var margin = 20,
padding = 2,
diameter = 650,
root = flareData();
var color = d3.scale.linear()
.domain([0, depthCount(root)])
.range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"])
.interpolate(d3.interpolateHcl);
var circle = svg.selectAll("circle")
.data(nodes)
.enter().append("circle")
.attr("class", function(d) {
return d.parent ? d.children ? "node" : "node node--leaf" : "node node--
root";
})
.style("fill", function(d) {return d.children ? color(d.depth) : null;})
.on("click", function(d) {
if (focus !== d) zoom(d), d3.event.stopPropagation();
});
function flareData() {
return {
"name": "flare",
"children": [{
"name": "L1",
"children": [{
"name": "L1.1",
"children": [{
"name": "L1.1.1",
"children": [{
"name": "L1.1.1.1",
"children": [{
"name": "L1.1.1.1.1",
"size": 35
}, {
"name": "L1.1.1.1.2",
"size": 35
}, {
"name": "L1.1.1.1.3",
"size": 35
}, {
"name": "L1.1.1.1.4",
"size": 35
}, {
"name": "L1.1.1.1.5",
"size": 35
}, {
"name": "L1.1.1.1.6",
"size": 35
}]
}]
}]
}]
}]
}
}
解决方法:
创建颜色的ordinalScale:
var leafColor = d3.scaleOrdinal().range(hexa).domain(d3.range(0, hexa.length - 1));
过滤以获取树叶并应用填充样式:
circle.filter(function(d){
return !d.children;
})
.style('fill', function(da, i){
return leafColor(i);
});
标签:javascript,css,d3-js,html,circle-pack 来源: https://codeday.me/bug/20190701/1347078.html