2017-08-02 58 views
1

試圖通過分至填充線圖上矩形的顏色,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

我在黑色的時刻,可能會默認顏色。

感謝

回答

1

您可以簡化這個,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>

+0

謝謝你的快速和全面的答覆。我需要時間來玩這個。 –

+0

是的,就是當我放入.style('fill',function(d){return d.value})時,它需要這個顏色範圍並根據d.value放置它們。完美,謝謝 –