如何为具有一个分支和多个子项的数据集显示不同颜色的d3气泡?

时间:2013-11-15 15:04:23

标签: javascript d3.js colors circle-pack

按照http://bl.ocks.org/mbostock/4063269上发布的示例开发d3气泡图:

enter image description here

我的数据集有一个分支,但有很多孩子(见下面的示例)。我的所有气泡都以相同的颜色显示。是否可以修改逻辑以为同一分支中的每个子项生成不同的颜色气泡?如果是这样,将非常感谢任何援助。

{
 "name": "mydata",
 "children": [
  {"name": "test1", "size": 5},
  {"name": "test2", "size": 10},
  {"name": "test3", "size": 15},
  {"name": "test4", "size": 20}
 ]
}

3 个答案:

答案 0 :(得分:1)

只需将不同的基准传递给颜色函数,例如指数:

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

或者,对于您的数据,大小:

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

答案 1 :(得分:1)

用图片随机颜色用户

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

答案 2 :(得分:0)

我们可以使用填充颜色的两个概念

1. var colour = d3.scale.category20(); // it will set random color from 20 color list.

2.根据来自JSON Data的文本值轻松设置自定义颜色..我使用了以下概念

.style("fill", function (d) {
            if (d.item.text == "InProgress") {
                return "#2DD7EB"
            } else if (d.item.text == "Signed Off") {
                return "#3CEB2D"
            } else if (d.item.text == "Pending") {
                return "#F55431"
            }