更新機能を使用してD3jsゲージチャートの色を変更するには？

Question

私はちょうど私が、以下のものを使用して試した値

を変更することなく、ゲージの色を更新したい以下のチャートhttp://bl.ocks.org/brattonc/5e5ce9beee483220e2f6

を使用しています：

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

が、これは既存のグラフを削除新しいものと交換してください。

次に、私は別のD3js関数 "Update"に到達しますか？そこから、私はチャートの値を更新することができ、 Iは

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

が、運を使用して色を更新しようとしました。

私はこの機能がうまくいくかもしれないではなく、必ず

Answer 1

更新機能は、現在だけなので、あなたがそれに行うことができ、すべての値を変更することで、新しい値をとるんと仮定しています。また、スタイル/色/設定を変更するには、それを更新する必要があります。

ステップ1は、それはまた、新しい設定とるようupdate -functionを更新：テキストの遷移を更新し、ステップ2

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

は、これは必要とされているすべてである、とあなたは今

01を呼び出すことができます

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はランダムな色