Изменить цвет метки программно

Question

Я хочу изменить цвет столбцов программно, то есть свойство color.value, которое я вставил в spe c.

У меня есть несколько вегетарианских диаграмм, которые упорядочены, и я хочу представить порядок например, окрашивая столбики с помощью набора category10 . Т.е. первый график - синий, второй - оранжевый, третий - зеленый, и т. Д. c. Если порядок меняется, цвет должен обновляться (все остальное остается прежним).

Мой первый подход состоял в том, чтобы использовать рендерер SVG и просто изменить стиль баров: https://codepen.io/keckelt/pen/ExaJwdV :

 d3.select('#vis1').selectAll('svg .mark-rect > path').style('fill', '#A1E');

При наведении курсора на одну из полос это нарушает мой применяемый стиль, поэтому мне нужен способ сброса цвета, который использует Vega, когда снова применяется стандартный цвет. Это возможно?

Answer 1

Цветовая шкала может быть изменена путем обновления диапазона базовой шкалы d3 с помощью View API , например:

//get color scale
const oldColors = vegaView.scale('color').range();

//set new color scale
const newcolor = ['#A1E'];
vegaView.scale('color').range(newColor);

Изменение не было отражено визуализацией (даже при runAysnc()) поэтому я совместил изменение цветовой шкалы с изменением цвета элемента SVG (как в исходном вопросе):

 d3.select('#vis1').selectAll('svg .mark-rect > path').style('fill', '#A1E');