D3.js/Dc.js different colored line segments for single line in line graph

问题

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

回答1:

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>

Play with it here

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.

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

来源：https://stackoverflow.com/questions/21143651/d3-js-dc-js-different-colored-line-segments-for-single-line-in-line-graph