Question

我使用下面的图表http://bl.ocks.org/brattonc/5e5ce9beee483220e2f6

我只想更新仪表的颜色而不更改值

我尝试过使用以下内容：

d3.selectAll("svg > *").remove(); 
gauge1 = loadLiquidFillGauge("fillgauge1", 17, configNew1); 
gauge2 = loadLiquidFillGauge("fillgauge2", 60, configNew2)

但这会删除现有图表并将其替换为new。

然后我到达另一个D3js功能，即＆＃34;更新＆＃34;？我可以从中更新图表的值，我尝试使用

更新颜色

gauge1.update.config1.circleColor("#ff0000")

但没有运气。

我只是假设这个功能可能有效但不确定

Answer 1

更新功能目前只占用一个新值，因此您只能更改该值。还可以更改样式/颜色/配置，您需要更新它。

Step1 ，更新update - 函数，这样它也需要一个新的配置：

this.update = function(value,config){

Step2 ，更新文字的过渡，并为圆圈/ wave添加新的过渡，以便它们也更新颜色：

text1.transition()
    .duration(config.waveRiseTime)
    .tween("text", textTween)
    .style("fill", config.textColor)
text2.transition()
    .duration(config.waveRiseTime)
    .tween("text", textTween)
    .style("fill", config.waveTextColor);
fillCircleGroup.select('circle').transition()
    .duration(config.waveRiseTime)
    .style("fill", config.waveColor);
gaugeGroup.select('path').transition()
    .duration(config.waveRiseTime)
    .style("fill", config.circleColor);

这就是所需要的，您现在可以致电

gauge1.update(NewValue(),newConfig)

示例：更新仪表的所有颜色

//Generate four random colors
var rndColor1 = '#'+Math.floor(Math.random()*16777215).toString(16);
var rndColor2 = '#'+Math.floor(Math.random()*16777215).toString(16);
var rndColor3 = '#'+Math.floor(Math.random()*16777215).toString(16);
var rndColor4 = '#'+Math.floor(Math.random()*16777215).toString(16);

//Generate a new config and update the colors
var newConfig = liquidFillGaugeDefaultSettings();
newConfig.textColor = rndColor1;
newConfig.waveTextColor = rndColor2;
newConfig.circleColor = rndColor3;
newConfig.waveColor = rndColor4;

//Call the update-function, wich now also takes a new config
gauge2.update(NewValue(),newConfig);

Here是一个小提琴，每次用随机颜色更新gague2

如何使用更新功能更改D3js Gauge图表颜色？

1 个答案: