Как назначить разные цвета каждому узлу на солнечных лучах? - PullRequest
Новая
       87

Как назначить разные цвета каждому узлу на солнечных лучах?

0 голосов
/ 10 июня 2019

Я создаю солнечные лучи для больших данных.Чтобы сделать его более читабельным, мне нужно назначить разные цвета для каждого узла (в идеале разные оттенки одного и того же цвета для каждого поддерева).

Я уже пробовал с: 

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

Поэтому я хотел бы иметь разные оттенки на каждом поддереве, чтобы сделать его более читабельным.

У кого-нибудь есть идея?

1 Ответ

0 голосов
/ 10 июня 2019

вы можете попробовать с 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.

...