每个圆圈的不同颜色 - D3 圆圈包答案

【问题标题】：Different colors for each circle - D3 circle pack每个圆圈的不同颜色 - D3 圆圈包
【发布时间】：2013-12-19 04:36:44
【问题描述】：

我已经做了气泡图。但是我没有为每个气泡获得不同的颜色。我怎么能那样做？我怎样才能为每个圆圈赋予不同的颜色？并且具有最高值的圆形数据应始终位于被其他气泡包围的中心。

片段：

var diameter = 200,
format = d3.format(",d"),
color = ["#7b6888", "#ccc", "#aaa", "#6b486b"];

 var bubble = d3.layout.pack()
.size([diameter, diameter]);

   var svg = d3.select("#bubbleCharts").append("svg")
.attr("width", diameter + 10)
.attr("height", diameter)
.attr("class", "bubble");

  var a;

   d3.json("flare.json", function(error, root) {
   var node = svg.selectAll(".node")
  .data(bubble.nodes(classes(root))
  .filter(function(d) { return !d.children; }))
  .enter().append("g")
  .attr("class", "node")
  .attr("transform", function(d) { return "translate(" + d.x + 20 + "," + d.y + ")"; });

   node.append("circle")
  .attr("r", function(d) { return d.r+ 7; })
  .style("fill", function(d) { 
  for(a in color){
  return color[a]; };} );

    node.append("text")
  .attr("dy", ".3em")
  .style("text-anchor", "middle")
  .text(function(d) { return d.value+"%"; });
  });

   function classes(root) {
    var classes = [];

    function recurse(name, node) {
    if (node.children) node.children.forEach(function(child) { recurse(node.name, child); });
      else classes.push({packageName: name, value: node.value});
   }

     recurse(null, root);
      return {children: classes};
     }

我的数据是：

   {
     "name": "Spending Activity",
     "children": [
         {"name": "Petrol", "value": 60},
         {"name": "Travel", "value": 10},
         {"name": "Medical", "value": 25},
         {"name": "Shopping", "value": 5}
     ]
   }

【问题讨论】：

在填充函数中尝试传递 d & i 然后返回 color[i]。哦，你可能不得不使用 attr 而不是 style（我不记得了）。

标签： javascript svg d3.js colors circle-pack

【解决方案1】：

您可能需要一个色标来获得填充颜色：

var colour = d3.scale.category20();

然后你可以像这样设置填充颜色：

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

至于节点的位置，包布局不提供任何影响它的功能，即您不能强制特定的圆位于中心。

【讨论】：

我们如何在此气泡图中添加图例？
这是一个完全不同的问题。这取决于你想要什么样的传说等。
我在圆圈内显示值。我需要名字作为传说。例如，在上面提供的数据中，如果值为 60，我需要图例中的名称“Petrol”。谢谢
如果您将其作为一个单独的问题以及演示您尝试过的代码一起发布可能会更好。
我只在 chrome 中收到“无法读取未定义的属性 'children'”错误。

【解决方案2】：

在选择内置 D3 颜色集时，此参考卡可能会很方便：

或者，您可以使用 colorbrewer 颜色集：（参见示例 here）

【讨论】：