尝试按比例填充条形图上的矩形颜色
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
上覆盖蓝色我此刻变黑了,可能是默认颜色。
由于
答案 0 :(得分:2)
您可以简化这一点,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>
&#13;