根據數據更改線圖的顏色（紅色表示閾值0以上，藍色表示0以下）

我正在研究基於對象溫度轉發圖形的問題。目標是顯示紅色線條圖的部分，其中對象的溫度高於0，藍色低於0時顯示藍色根據數據更改線圖的顏色（紅色表示閾值0以上，藍色表示0以下）

該圖與此處可用的圖非常相似。 http://bl.ocks.org/pranitar/01305d9ad0eba73dbf80

我可以改變顏色，但不能將其限制在閾值以上或以下的部分。相反，當實時輸入值時，整個圖形將變爲紅色或藍色。請注意，該圖是一個動態的圖形，這意味着數據被提供給圖形實時和圖形將保持換檔顯示隨時間變化曲線圖。

任何幫助，將不勝感激。

我正在使用的是JS和CSS。請沒有額外的框架建議。

來源

2017-08-21 Jasmeet Singh

（注意，您的例子是使用d3，這不是純js/css）。在這個例子中，只有一個''元素，你想要做的是在不同的'用正確的CSS類分割你的數據'所以它得到正確的顏色是什麼。（我不知道如何做到這一點，但是這是一個想法） – ValLeNain

感謝@ValLeNain。我找到了解決方案。閱讀D3文檔有所幫助。 –

用d3撥弄了很多（差不多4個小時）後，我想出瞭解決這個問題的方法。我需要添加的是漸變線，並定義顏色和x/y值，在該值處漸變將更改線的顏色。

下面是我在這個改變後得到的樣本。

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

下面是相同的代碼示例。

添加到CSS：

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

添加到圖表：

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

對於在動作圖中的完整的外觀： https://github.com/jasmeetsinghbhatia/Roll-A-Ball-3D/blob/master/Assets/StreamingAssets/Tests/speed-ball-graph.html

來源

2017-08-22 23:29:17

根據數據更改線圖的顏色（紅色表示閾值0以上，藍色表示0以下）

回答

相關問題