Javascript D3.js/Dc.js直线图中单线的不同颜色线段

我在dc.js中创建了一个折线图，它是在d3.js的基础上构建的。我在y轴上数数，在x轴上数数小时。我希望在午夜到早上8点之间的线路是蓝色的，从晚上8点到12点的线路是橙色的，从下午12点到5点的线路是红色的，从下午5点到11点的线路是绿色的。我尝试过用不同的颜色创建4个不同的路径（下面是一个示例）。颜色确实会显示出来，但它们会在数据点之间添加额外的线条，并且一些颜色会一起流血，特别是如果选择了较浅的颜色。我已经附上了我想要的线条看起来像什么的图像。如果有人能给我指出正确的方向，我会非常感激

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

---

< P>一个选项，你可以考虑使用梯度。比如：

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

玩它

svg应该足够简单，可以使用D3创建，但是存在一些问题，例如，我在一些浏览器上看到渐变id不是整个页面所独有的问题

---

还请注意，有一些方法可以控制渐变如何映射到您的路径，您可以了解这些方法

我正试图像上面那样添加我自己的svg路径，但不知道y坐标是什么。我希望它在午夜到早上8点之间的所有y值都是蓝色的。我读到的所有内容都说明我必须给出一个特定的y值。@user3057785您必须动态创建线性渐变，使用与

d3.svg.line

函数用于计算路径相同的y刻度设置停止偏移值。