Question

我想以编程方式更改条形的颜色，即我在规范中添加的color.value属性。

我有多个按顺序排列的vega图表，例如，我想通过用category10设置颜色为条形来表示顺序。即第一个图表是蓝色，第二个橙色，th绿色等。如果顺序发生变化，则颜色应进行更新（其他所有内容保持不变）。

我的第一种方法是使用SVG渲染器并简单地重新设置条形：https://codepen.io/keckelt/pen/ExaJwdV：

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

但是，将光标悬停在其中一根柱上会破坏我的应用样式，因此当重新应用标准颜色时，我需要一种方法来重置Vega使用的颜色。有可能吗？

Answer 1

可以通过View API更新基础d3色标的范围来更改色标，例如：

//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');

以编程方式更改标记颜色

1 个答案: