标签：javascript css d3-js html circle-pack

我正在使用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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。