【问题标题】：How to assign different color to each node on a sunburst?如何为旭日形上的每个节点分配不同的颜色？
【发布时间】：2019-06-10 09:18:04
【问题描述】：

我正在为大数据创建一个旭日形。为了使其更具可读性，我需要为每个节点分配不同的颜色（理想情况下，每个子树具有相同颜色的不同深浅）。

我已经尝试过：

 d3.scaleSequential()
 d3.scale.ordinal()
 d3.scale.category20c()

我认为它可以工作，但我不知道该放在哪里。目前它只对每个子树使用一种颜色。

 var width = 500;
 var height = 500;
 var radius = Math.min(width, height) / 2;
 var color = d3.scaleSequential().domain([1,10]).interpolator(d3.interpolateViridis);

 var g = d3.select('svg')
   .attr('width', width)
   .attr('height', height)
   .append('g')
   .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');

 var partition = d3.partition() //.layout
   .size([2 * Math.PI, radius]);


 d3.json("file:///c:\\Users\\c1972519\\Desktop\\Stage\\tests_diagrams\\figure_4.8_ex3\\data2.json", function(error, nodeData){
       if (error) throw error;

       var root = d3.hierarchy(nodeData)
         .sum(function(d){
             return d.size;
           });

       partition(root);
       var arc = d3.arc()
         .startAngle(function(d) { return d.x0; })
         .endAngle(function(d) { return d.x1; })
         .innerRadius(function(d) { return d.y0; })
         .outerRadius(function(d) { return d.y1; });

       var arcs = g.selectAll('g')
         .data(root.descendants())
         .enter()
         .append('g')
         .attr("class", "node")
         .append('path')
         .attr("display", function (d) { return d.depth ? null : "none"; })
         .attr("d", arc)
         .style('stroke', '#fff')
         .style("fill", function(d){return color(d)});
 }

所以我想在每个子树上使用不同的阴影以使其更具可读性。

有人有想法吗？

【问题讨论】：

标签： javascript d3.js colors sunburst-diagram

【解决方案1】：

你可以试试 scaleLinear。

var x = d3.scaleLinear([10, 130], [0, 960]);

or

var color = d3.scaleLinear([10, 100], ["brown", "steelblue"]);

示例：

https://bl.ocks.org/starcalibre/6cccfa843ed254aa0a0d

文档： https://github.com/d3/d3-scale/blob/master/README.md#scaleLinear

线性刻度

d3.scaleLinear([[domain, ]range])

使用指定的域和范围构造一个新的连续比例，默认插值器和钳位禁用。如果未指定域或范围，则每个默认为 [0, 1]。线性刻度是连续定量数据的一个很好的默认选择，因为它们保留了比例差异。每个范围值 y 可以表示为域值 x 的函数：y = mx + b。

【讨论】：