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

Desired Output

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

D3.js / Dc.js线图中单线的不同彩色线段

1 个答案: