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线条图中单线的不同彩色线段

回答

相关问题