D3.js / Dc.js线图中单线的不同颜色的线段 [英] D3.js/Dc.js different colored line segments for single line in line graph

问题描述

我在dc.js中创建了一个折线图，它建立在d3.js之上。我在y轴上做计数，在x轴上做小时。我想要线在午夜8点之间，橙色从8-12pm，红色从12 pm-5，和绿色从下午5点至11点。我已经尝试创建4种不同的路径（一个例子是下面）与不同的颜色。颜色会显示，但它们在数据点之间添加额外的线，一些颜色一起流出，特别是如果选择较浅的颜色。我附上了一幅我想要的线条的图像。如果任何人都可以指出我的方向，我会真的很感激。

I have created a line chart in dc.js, which is built off of d3.js. I am doing a count on the y axis and hours on the x axis. I want the line to be blue between midnight-8am, orange from 8-12pm, red from 12pm-5, and green from 5pm-11pm. I have tried creating 4 different paths (an example of one is below) with different colors. The colors do show up but they add extra lines between the data points and some of the colors bleed together, especially if a lighter color is chosen. I have attached an image of what I want the lines to look like. If anyone can point me in the right direction, I would really appreciate it.

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

推荐答案

你可能会考虑使用一个渐变。像：

One option you might consider is to use a gradient. Something like:

<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创建，但有一些gotcha的，例如我看到的问题一些浏览器，其中渐变ID不是整个页面的唯一。

The svg should be simple enough to create using D3, but there are some gotcha's, for example I have seen problems on some browsers where the gradient id was not unique to the whole page.

还请注意，有一些方法来控制渐变如何映射到您的路径，您可以了解< a href =http://www.w3.org/TR/SVG11/pservers.html =nofollow>此处

Also note there there are ways to control how the gradient maps to your path that you can learn about here

这篇关于D3.js / Dc.js线图中单线的不同颜色的线段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！