Farbe des Liniendiagramms basierend auf Daten ändern (rot für über 0 und blau für unter 0)

Ich arbeite an einem Problem, um ein Diagramm basierend auf der Temperatur eines Objekts zu übertragen. Das Ziel ist es, Teile des Liniendiagramms in rot zu zeigen, wo die Objekttemperatur über 0 und blau ist, wenn es unter 0 liegtFarbe des Liniendiagramms basierend auf Daten ändern (rot für über 0 und blau für unter 0)

Die Grafik ist sehr ähnlich zu dem, was hier verfügbar ist. http://bl.ocks.org/pranitar/01305d9ad0eba73dbf80

Ich bin in der Lage, die Farbe zu ändern, kann aber nicht auf Teile der Linie über oder unter dem Schwellenwert begrenzen. Stattdessen ändert sich der gesamte Graph in Rot oder Blau, wenn die Werte in Echtzeit eingegeben werden. Bitte beachten Sie, dass es sich bei dem Diagramm um ein dynamisches Diagramm handelt, bei dem Daten in Echtzeit graphisch dargestellt werden und sich das Diagramm im Laufe der Zeit ändert, um ein Liniendiagramm anzuzeigen.

Jede Hilfe wäre willkommen.

Alles was ich benutze ist JS und CSS. Bitte keine zusätzlichen Rahmenvorschläge.

Quelle

2017-08-21 Jasmeet Singh

(beachten Sie, dass Ihr Beispiel ist die Verwendung d3, das ist nicht rein js/css). In dem Beispiel gibt es nur ein '' Element, was Sie tun möchten, ist Ihre Daten über verschiedene ' 'mit der richtigen CSS-Klasse zu teilen, so dass es die richtige Farbe bekommt. (Ich weiß nicht, wie es geht, aber das ist eine Idee) – ValLeNain

Danke @ValLeNain. Ich habe die Lösung gefunden. Das Lesen der D3 Dokumentation half. –

Ok, nachdem ich viel mit d3 gespielt habe (fast 4 Stunden), habe ich die Lösung für diese Situation gefunden. Alles, was ich hinzufügen musste, war ein Farbverlauf zur Linie und definiert Farben und x/y-Werte, bei denen der Farbverlauf die Farben der Linie verändern würde.

Hier ist ein Beispiel von dem, was ich nach dieser Änderung bekommen habe.

https://cdn.rawgit.com/jasmeetsinghbhatia/Roll-A-Ball-3D/2ce001fa/color%20graph%20for%20threshold%20speed%202.mov

Hier ist der Beispielcode für gleiche.

zu der CSS hinzufügen:

.graph .group { 
      fill: none; 
      stroke: url(#line-gradient); 
      stroke-width: 1.5; 
     }

dem Graphen hinzufügen:

svg.append("linearGradient") 
       .attr("id", "line-gradient") 
       .attr("gradientUnits", "userSpaceOnUse") 
       .attr("x1", 0).attr("y1", y(0)) 
       .attr("x2", 0).attr("y2", y(2)) 
       .selectAll("stop") 
       .data(
         [ 
         {offset: "100%", color: "blue"}, 
         {offset: "100%", color: "red"}, 
         ] 
        ) 
       .enter().append("stop") 
         .attr("offset", function(d) { return d.offset; }) 
         .attr("stop-color", function(d) { return d.color; });

Für einen kompletten Blick auf die Grafik in Aktion: https://github.com/jasmeetsinghbhatia/Roll-A-Ball-3D/blob/master/Assets/StreamingAssets/Tests/speed-ball-graph.html

Quelle

2017-08-22 23:29:17

Farbe des Liniendiagramms basierend auf Daten ändern (rot für über 0 und blau für unter 0)

Antwort

Verwandte Themen