Суть заключалась в том, чтобы нанести начальные и конечные значения на оси x / y с градиентным прямоугольником между переходами от низкого (непрозрачность 0,4) к высокому (непрозрачность 0).
Вскоре я обнаружил, что градиенты не были встроенной функцией d3.js.
На мой взгляд, каждый прямоугольник должен иметь уникальный градиент, чтобы отображать правильный цвет в правильном направлении. Чтобы решить эту проблему, я написал функцию градиентов, принимающую несколько переменных следующим образом:
Шаг 1 заключался в добавлении «def» и градиента к svg:
svg.append («defs»)
.append («linearGradient»)
Шаг 2 - определить уникальный id градиента (переменная 1):
.attr («идентификатор», идентификатор)
Затем определите направление градиента с помощью переменных 2 и 3: x1, x2. Для слева направо x1 = 0%, x2 = 100% и наоборот.
.attr («x1», x1) .attr («y1», «0%»)
.attr («x2», x2) .attr («y2», «0%»);
Затем дважды выберите новый def, используя определенный idtag:
idtag = ‘#’ + id
и определите начальный и конечный классы. Оба этих выбора принимают наши последние пять переменных: color, off1, off2, op1 и op2.
d3.select (idtag)
.append («стоп»)
.attr («стоп-цвет», цвет)
.attr («класс», » begin »)
.attr (« offset », off1)
.attr (« stop-opacity », op1);
d3.select (idtag)
.append («стоп»)
.attr («класс», «конец»)
.attr («стоп- цвет », цвет)
.attr (« смещение », выкл2)
.attr (« стоп-непрозрачность », op2);
Смещение использовалось для круговых конечных точек, которые на самом деле представляют собой круги с градиентом. Таким образом, если изменение отрицательное (от высокого к низкому, оранжевый, красный и фиолетовый на изображении), начальное смещение составляет 50%, конечное смещение равно 0%, то есть только правая половина круга нарисовано.
Непрозрачность работает аналогичным образом. Поэтому, если изменение положительное (от низкого к высокому, зеленый и синий на изображении), начальная непрозрачность составляет 0,4 (непрозрачность 0,4), а конечная непрозрачность - 1 (полный цвет).
Затем эту функцию необходимо вызвать при установке стиля заливки в прямоугольнике или круге (или любой другой форме, если на то пошло):
.style («заливка», функция (d) {
if (d.end_v ›d.start_v) {
gradient (color (d.label), 'circ' + d.id , «100%», «0%», «50%», «0%», 0,1)
} else {
gradient (color (d.label), 'circ' + d .id, «0%», «100%», «50%», «0%», 0,1)
} return «url (#circ» + d.id + »)»; })
Возвращенный тег «url (#circ» + d.id + ») запускает градиент в действие.
Если вы хотите попробовать, вы можете найти визуализацию в действии здесь или полный код здесь.
