D3.js, начинающийся с отрицательных значений

77
7

Итак, у меня есть что-то вроде этого изображения на экране:



Я рассмотрел примеры создания гистограммы, но проблема, с которой я столкнулась, - это диаграмма от отрицательного, от нуля до положительного. Мне интересно, должна ли каждая строка быть 3 бара (отрицательная до нуля, средняя пунктирная прямая, а затем от среднего до максимального).


Это похоже на диаграмму свечей, но горизонтальную.


Любая помощь будет высоко оценена.


Вот скрипка с тем, что я достиг до сих пор: http://jsfiddle.net/jLjPz/

спросил(а) 2021-01-27T16:39:18+03:00 4 месяца, 3 недели назад
1
Решение
78

Я изменил ваш jsfiddle, чтобы он выглядел похожим на изображение, которое вы предоставили. Несколько замечаний о моих изменениях:


http://jsfiddle.net/jLjPz/3/


Для линейных масштабов вы можете подавать отрицательное и положительное число в массив. Поэтому вместо .domain([0,100]) следует использовать .domain([-100,100]).


Вы можете использовать этот масштаб для отображения ваших d[0] и d[1], чтобы при рисовании прямоугольника будет отображаться правильный размер с вашей осью.

Наконец, я сделал немного математики, чтобы взять ваши значения [start, width], чтобы они хорошо работали со шкалой.


x(d[0]) - это правильно масштабированное положение слева от каждого прямоугольника.
x(d[1]+d[0])-x(d[0]) - это правильно масштабированная ширина каждого прямоугольника.
x(d[1]+d[0])-x(d[0]))/2+x(d[0]) - это правильно масштабированная середина прямоугольника.


Надеюсь, это поможет!

ответил(а) 2021-01-27T16:39:18+03:00 4 месяца, 3 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема