将元素添加到圆形包装颜色的层次结构

Question

我正在尝试使用基于我数据中的数字的圆形包装示例 (https://bl.ocks.org/mbostock/4063269#index.html) 设置我的圆圈的特定颜色。但是当我使用时：

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);
        }
    });

它只是将圆圈显示为全黑？

我该如何解决这个问题？

Answer 1

必须是d.data.color，而不是d.color：

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

用你的代码检查这个演示（忽略第一个undefined，那是根本身）：

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);
    }
  });

root.each(function(d) {
  console.log(d.data.color)
})

<script src="https://d3js.org/d3.v4.min.js"></script>

现在看看如果你像以前一样只使用d.data 会发生什么：

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);
    }
  });

root.each(function(d) {
  console.log(d.color)
})

<script src="https://d3js.org/d3.v4.min.js"></script>