javascript - D3.js/Dc.js 折线图中单线的不同颜色线段

Question

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

Answer 1

您可能考虑的一个选择是使用渐变。像这样的东西:

<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