D3 v5 - Диаграмма полосы переменной толщины (с течением времени) - PullRequest
Новая
       10

D3 v5 - Диаграмма полосы переменной толщины (с течением времени)

1 голос
/ 26 мая 2020

Моя цель - создать новую диаграмму, выглядящую как sh, чтобы использовать ее в качестве альтернативы гистограммам с накоплением. Это похоже на диаграмму с областями, но нет привязки к оси x. Вместо этого каждая полоса расширяется или сужается, чтобы отразить увеличение или уменьшение ее относительной доли в общей сумме. Изображенный ниже:

enter image description here

Это немного сложно для меня, потому что я привык к диаграммам, имеющим ось y. Однако здесь нет оси y; ширина каждой полосы определяет пропорцию. Цвет обозначает тип. Мы можем игнорировать провалы и другие движения в пространстве y (можно просто выровнять по центру). Ось x - это просто время (месяцы).

Примеры данных: 

var data = [
{'month':'Jan', 'thing1':76,'thing2':21,'thing3':168},
{'month':'Feb', 'thing1':62,'thing2':91,'thing3':159},
{'month':'Mar', 'thing1':98,'thing2':67,'thing3':455},
{'month':'Apr', 'thing1':324,'thing2':53,'thing3':130}
];

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

  var myBands = d3.area()
      .x(function(d,i) { return xScale(d.month); })
      .y0(???)
      .y1(???})
      .curve(d3.curveCardinal);

Учитывая, что нет встроенного решения для этого типа диаграмм, мне может потребоваться определить свой путь logi c вручную, но, как обозначено ???, я не могу понять как развить y logi c (насколько толстая полоса).

Question

Как я могу наметить необходимую толщину y logi c / для area() или другое path решение, чтобы попытаться использовать вышеуказанный вдохновляющий визуал?

...