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