如何使用更新函数更改D3js Gauge图表颜色？

我用下面的图表http://bl.ocks.org/brattonc/5e5ce9beee483220e2f6 如何使用更新函数更改D3js Gauge图表颜色？

我只是想更新计的颜色不改变价值

我已经尝试使用以下：

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

但这删除现有图表并用新的替换它。

然后我到达另一个D3js函数，它是“更新”？从中我可以更新图表的值，我尝试更新使用

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

但没有运气的颜色。

我只是假设，这个功能可能会奏效，但不知道

来源

2016-11-21 Abhay Mandal

你能否提供一些更多的信息小提琴？你试过什么了？例如，要更新第一个标尺的圆圈颜色，您需要将'config1.circleColor =“＃FF7777”;'改为所需的颜色。 – Cleared

我试过使用以下内容： d3.selectAll（“svg> *”）。remove（）; gauge1 = loadLiquidFillGauge（“fillgauge1”，17，configNew1）; gauge2 = loadLiquidFillGauge（“fillgauge2”，60，configNew2）但这会删除现有图表并将其替换为新图表。然后我到达另一个D3js函数，它是“更新”？我可以从中更新图表的值，我尝试使用“gauge1.update.config1.circleColor（”＃ff0000“）”更新颜色，但没有运气。我只是假设这个功能可能工作，但不能确定。 –

更新功能并不目前只采取一种新的价值，所以你可以做的是改变值。也可以更改样式/颜色/配置您需要更新它。

第一步，更新update -function所以它也需要一个新的配置：

this.update = function(value,config){

第二步，更新文本的过渡，并添加圆/波，使新的过渡他们还更新了颜色：

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更新每一秒与随机颜色

来源

2016-11-21 12:00:51 Cleared

如何使用更新函数更改D3js Gauge图表颜色？

回答

相关问题