d3.js图表​​区域填充不同的颜色

Question

我正在尝试使用不同的颜色填充图表下方的区域，具体取决于x值范围，例如，对于x值0到10黄色，从10到20红​​色等等。有没有办法做到这一点？

我的单一填充色的javascript是

var m = 80; 
var w = 900 - 3*m;
var h = 600- 3*m; 

var x = d3.scale.linear().range([0, w]);
var y = d3.scale.linear().range([h, 0]);
x.domain(d3.extent(data, function(d) { return d.time; }));
y.domain(d3.extent(data, function(d) { return d.points; }));

var line = d3.svg.line()
.x(function(d) { 
return x(d.time); 
})

.y(function(d) { 
return y(d.points); 
})

var graph = d3.select("#graph").append("svg:svg")
           .attr("width", w+3*m)
           .attr("height", h+3*m)
           .append("svg:g")
           .attr("transform", "translate(" + 1.5*m + "," + 1.5*m + ")");

var area = d3.svg.area()
.x(function(d) { return x(d.time); })
.y0(h)
.y1(function(d) { return y(d.points); });

graph.append("path")
.datum(data)
.attr("class", "area")
.attr("d", area)
.style("fill","steelblue"); 

提前致谢！

Answer 1

你基本上有两个选择。

• 您可以为不同的颜色定义单独的区域。
• 您可以定义单个区域并使用渐变来模拟不同的颜色。

第二个可能更容易，因为你不需要绘制任何单独的路径，你可以简单地填写你正在做的那个。

对于渐变，您需要定义与值对应的停止（即颜色更改）。特别是，您需要在同一个地方引入两个停靠点，使其看起来像颜色突然变化。有关渐变here的更多信息。代码看起来像这样。

var grad = graph.append("defs")
     .append("linearGradient")
     .attr("id", "grad");
grad.append("stop").attr("offset", "0%").attr("stop-color", "yellow");
grad.append("stop").attr("offset", "10%").attr("stop-color", "yellow");
grad.append("stop").attr("offset", "10%").attr("stop-color", "red");
grad.append("stop").attr("offset", "20%").attr("stop-color", "red");
// etc

graph.append("path")
     .style("fill", "url(#grad)");

止损的位置将由您的比例决定。