D3.js/Dc.js線條圖中單線的不同彩色線段

我在dc.js中創建了一個折線圖，該線圖由d3.js構建而成。我在y軸上計數，在x軸上計算小時數。我希望線路在午夜8點之間藍色，8點至12點爲橙色，12點至5點爲紅色，5點至11點爲綠色。我曾嘗試用不同的顏色創建4個不同的路徑（下面是一個例子）。顏色顯示出來，但是它們在數據點之間增加了額外的線條，一些顏色在一起流血，特別是如果選擇較淺的顏色。我附上了我想讓線條看起來像的圖像。如果任何人都能指引我正確的方向，我會非常感激。你可能會考慮D3.js/Dc.js線條圖中單線的不同彩色線段

var path2 = layersEnter.append("path") 
     .attr("class", "line2") 
     .attr("stroke", "#B31E3F") 
     .attr("stroke-width", "3px") 
     .attr("fill", "none"); 
    if (_dashStyle) 
     path.attr("stroke-dasharray", _dashStyle); 

    dc.transition(layers.select("path.line2"), _chart.transitionDuration()) 
     .attr("d", function (d) { 
      var segments2 = d.points; 
      //console.log("s2b: " + segments2); 
      //segments2.splice(23, 1); 
      //segments2.splice(22, 1); 
      //segments2.splice(21, 1); 
      //segments2.splice(20, 1); 
      //segments2.splice(19, 1); 
      //segments2.splice(18, 1); 
      //segments2.splice(17, 1); 
      //segments2.splice(16, 1); 
      //segments2.splice(15, 1); 
      //segments2.splice(14, 1); 
      //segments2.splice(13, 1); 
      //segments2.splice(12, 1); 
      //segments2.splice(11, 1); 
      //segments2.splice(10, 1); 
      segments2.splice(9, 1); 
      segments2.splice(8, 1); 
      segments2.splice(7, 1); 
      segments2.splice(6, 1); 
      //segments2.splice(5, 1); 
      //segments2.splice(4, 1); 
      //segments2.splice(3, 1); 
      //segments2.splice(2, 1); 
      //segments2.splice(1, 1); 
      //segments2.splice(0, 1); 

      //console.log("s2a: " + segments2); 
      return safeD(line(segments2)); 
     });

Desired Output

來源

2014-01-15 user3057785

一種選擇是使用漸變。喜歡的東西：

<svg xmlns="http://www.w3.org/2000/svg" width="100%" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    viewBox="0 0 100 100" preserveAspectRatio="none"> 

    <linearGradient id="g"> 
    <stop offset="0" stop-color="#008"/> 
    <stop offset=".2" stop-color="#008"/> 
    <stop offset=".2001" stop-color="#960"/> 
    <stop offset=".5" stop-color="#960"/> 
    <stop offset=".5001" stop-color="#800"/> 
    <stop offset=".8" stop-color="#800"/> 
    <stop offset=".8001" stop-color="#080"/> 
    <stop offset="1" stop-color="#080"/> 
    </linearGradient> 

    <path d="M 3 48 30 50 50 78 97 22" stroke-width="4" stroke="url(#g)" fill="none"/> 
</svg>

與它玩here

的SVG應該足夠簡單，使用D3創造，但也有一些疑難雜症的，例如在梯度ID不是我看到的一些瀏覽器問題獨特的整個頁面。

還要注意有沒有辦法來控制漸變映射到你的路徑，你可以瞭解here

來源

2014-01-15 17:43:15 Superboggly

我試圖像上面一樣添加自己的SVG路徑，但不知道y座標是什麼將會。我希望它在午夜到上午8點之間對所有y值都是藍色的。我讀過的所有內容都說明我必須給出具體的y值。 – user3057785

@ user3057785您必須動態創建線性漸變，使用與d3.svg.line函數用於計算路徑相同的y尺度設置停止偏移值。 – AmeliaBR

你的方法像冠軍一樣工作。謝謝！！ – user3057785

D3.js/Dc.js線條圖中單線的不同彩色線段

回答

相關問題