Wie ändert man D3js Gauge Diagramm Farbe, mit Update-Funktion?

Question

Ich verwende Diagramm http://bl.ocks.org/brattonc/5e5ce9beee483220e2f6

folgend Ich möchte nur die Farbe des Sensors aktualisieren, ohne den Wert zu ändern

Ich habe versucht, mit folgenden:

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

aber dem bestehenden Diagramm entfernen und ersetze es durch neues.

Dann erreiche ich zu einer anderen D3js-Funktion, die "Update" ist? mit

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

aber kein Glück, von dem ich den Wert des Diagramms zu aktualisieren, versuchte ich die Farbe zu aktualisieren.

ginge davon aus mir nur, dass diese Funktion funktionieren könnte, aber nicht sicher ist

Answer 1

Die Update-Funktion zur Zeit nimmt nur einen neuen Wert, so alles, was Sie dagegen tun können, um den Wert zu ändern. Um auch den Stil/die Farbe/Konfig ändern zu können, müssen Sie ihn aktualisieren.

Schritt 1, aktualisieren Sie die update -function so dauert es auch eine neue config:

this.update = function(value,config){ 

Step2, den Übergang für den Text aktualisieren und neuen Übergang für den Kreis/Welle hinzufügen, so dass sie aktualisieren auch die Farbe:

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

das ist alles, was benötigt wird, und Sie jetzt

01 anrufen

gauge1.update(NewValue(),newConfig) 

Beispiel: aktualisieren alle Farben des Gauge

//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 ist eine Geige, wo gague2 jede Sekunde mit einer zufälligen Farbe aktualisiert wird