如何使用更新函數更改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圖表顏色？

回答

相關問題