d3.js配合比例为RGB()范围的蓝色
问题描述:
试图通过分至填充线图上矩形的颜色,d3.js配合比例为RGB()范围的蓝色
var x1 = d3.scaleTime()
.domain([parseTime('00:00'), d3.max(data, function(d) {
return d.value
})])
.range([2, 256]);
这样,
.style('fill', function(d) {
return "'rgb(0,0," + x1(d.value) + ")'"
})
试图范围在在规模上的颜色蓝色d.value
我在黑色的时刻,可能会默认颜色。
感谢
答
您可以简化这个,D3刻度可以颜色之间插值,所以如你可以使用代码:
var x1 = d3.scaleLinear()
.domain([0,100]])
.range(["#000000","#0000ff"]);
您还可以使用:
var x1 = d3.scaleLinear()
.domain([0,100]])
.range(["black","blue"]);
然后使用比例尺直接对矩形进行着色:
.style('fill', function(d) {
return x1(d.value);
})
另外,是的,黑色是默认颜色。对于在片段演示起见,我使用的是直线,而不是日期刻度:
var svg = d3.select("body")
.append("svg")
.attr("width",500)
.attr("height",200);
var x1 = d3.scaleLinear()
.domain([0,100])
.range(["#000000","#0000ff"]);
var x2 = d3.scaleLinear()
.domain([0,100])
.range(["orange","steelblue"]);
var rects = svg.selectAll(null)
.data(d3.range(100))
.enter()
.append("rect")
.attr("fill",function(d) { return x1(d); })
.attr("width",10)
.attr("height",10)
.attr("y",function(d) { return Math.floor(d/10) * 12; })
.attr("x",function(d) { return d % 10 * 12; })
var rects = svg.selectAll("null")
.data(d3.range(100))
.enter()
.append("rect")
.attr("fill",function(d) { return x2(d); })
.attr("width",10)
.attr("height",10)
.attr("y",function(d) { return Math.floor(d/10) * 12; })
.attr("x",function(d) { return d % 10 * 12 + 130 ; })
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>
谢谢你的快速和全面的答复。我需要时间来玩这个。 –
是的,就是当我放入.style('fill',function(d){return d.value})时,它需要这个颜色范围并根据d.value放置它们。完美,谢谢 –