Javascript d3.js图表区域填充不同颜色
我试图用不同的颜色填充图表下的区域,这取决于x值的范围,例如,对于x值0到10黄色,从10到20红色等等。有办法吗 我的单填充颜色javascript是Javascript d3.js图表区域填充不同颜色,javascript,d3.js,Javascript,D3.js,我试图用不同的颜色填充图表下的区域,这取决于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) {
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");
提前谢谢 基本上,您有两种选择
- 您可以为不同的颜色定义不同的区域
- 您可以定义单个区域并使用渐变来模拟不同的颜色
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)");
站点的位置将由您的标尺决定。谢谢!这似乎有效!但是如果不同颜色的区域和停止点的数量是可变的,取决于我绘制的数据,那怎么做呢?同样的事情。所有内容都添加到代码中,您当然也可以使用数据来定义它,例如,
grad.selectAll(“stop”).data(data.enter()…
。