D3.js 为圆形包装颜色向层次结构添加元素

我试图根据数据中的一个数字，使用圆形包装示例（）设置圆形的特定颜色。但是，当我使用：

node.append("circle")
    .attr("id", function(d) { return d.id; })
    .attr("r", function(d) { return d.r; })
    .style("fill", function(d) { return d.color });

有了这些数据：

var classes = [
    { id: '1', value: 1, color: '#42f445' },
    { id: '2', value: 2, color: '#f44141' },
    { id: '3', value: 3, color: '#42f445' },
    { id: '4', value: 4, color: '#f44141' },
    { id: '5', value: 5, color: '#42f445' },
    { id: '6', value: 6, color: '#f44141' },
    { id: '7', value: 7, color: '#42f445' }
];

根：

var root = d3.hierarchy({ children: classes })
    .sum(function(d) { return d.value; })
    .each(function(d) {
        if (id = d.data.id) {
            var id, i = id.lastIndexOf(".");
            d.id = id;
            d.package = id.slice(0, i);
            d.class = id.slice(i + 1);
        }
    });

它只是显示所有黑色的圆圈

---

如何解决此问题？

必须是

d.data.color

，而不是

d.color

：

.style("fill", function(d) { return d.data.color });

使用您的代码检查此演示（忽略第一个未定义的

，即根目录本身）：

var类=[{
id:'1'，
价值：1，
颜色：“#42f445”
}, {
id:'2'，
价值：2，
颜色：“#f44141”
}, {
id:'3'，
价值：3，
颜色：“#42f445”
}, {
id:'4'，
价值：4，
颜色：“#f44141”
}, {
id:'5'，
数值：5，
颜色：“#42f445”
}, {
id:'6'，
价值：6，
颜色：“#f44141”
}, {
id:'7'，
数值：7，
颜色：“#42f445”
}];
var root=d3.0({
儿童：班级
})
.sum（函数（d）{
返回d值；
})
.每个功能（d）{
if（id=d.data.id）{
变量id，i=id.lastIndexOf（“.”）；
d、 id=id；
d、 package=id.slice（0，i）；
d、 class=id.slice（i+1）；
}
});
根。每个（函数（d）{
console.log（d.data.color）
})