动态更改热图的色阶

Question

我正在尝试为我的热图可视化添加颜色选项。我在年初预定的颜色阵列，和我绘制矩形这样的：

plotChart.selectAll(".cell") 
        .data(data) 
        .enter().append("rect") 
        .attr("class", "cell") 
        .attr("x", function (d) { return x(d.timestamp); }) 
        .attr("y", function (d) { return y(d.hour); }) 
        .attr("width", function (d) { return x(d3.timeWeek.offset(d.timestamp, 1)) - x(d.timestamp); }) 
        .attr("height", function (d) { return y(d.hour + 1) - y(d.hour); }) 
        .attr("fill", function (d) { return colorScale(d.value); }); 

当我点击下拉菜单中的链接，我这样做：

$(".colorMenu").click(function (event) { 
     event.preventDefault(); 
     // remove # from clicked link 
     var addressValue = $(this).attr("href").substring(1); 
     // get color scheme array 
     var newColorScheme = colorDict[addressValue]; 
     // update color scale range 
     colorScale.range(newColorScheme); 
     // here I need to repaint with colors 
}); 

我的色阶位数规模，所以我不能使用逆函数来查找每个矩形的值。我不想再次读取数据，因为这会是一个负担，所以如何更改矩形的填充颜色？

Answer 1

我不想再次读取数据...

好了，你不需要再次读取数据。数据绑定到元素后，数据保持在那里，除非您更改/覆盖它。

因此，这可以简单地用做：

.attr("fill", d => colorScale(d.value)); 

检查这个演示：

var width = 500, 
 
    height = 100; 
 

 
var ranges = {}; 
 

 
ranges.range1 = ['#f7fbff','#deebf7','#c6dbef','#9ecae1','#6baed6','#4292c6','#2171b5','#08519c','#08306b']; 
 

 
ranges.range2 = ['#fff5eb','#fee6ce','#fdd0a2','#fdae6b','#fd8d3c','#f16913','#d94801','#a63603','#7f2704']; 
 

 
ranges.range3 = ['#f7fcf5','#e5f5e0','#c7e9c0','#a1d99b','#74c476','#41ab5d','#238b45','#006d2c','#00441b']; 
 

 
ranges.range4 = ['#fff5f0','#fee0d2','#fcbba1','#fc9272','#fb6a4a','#ef3b2c','#cb181d','#a50f15','#67000d']; 
 

 
var color = d3.scaleQuantile() 
 
    .domain([0, 15]) 
 
    .range(ranges.range1); 
 

 
var svg = d3.select("body") 
 
    .append("svg") 
 
    .attr("width", width) 
 
    .attr("height", height); 
 

 
var data = d3.range(15); 
 

 
var rects = svg.selectAll(".rects") 
 
    .data(data) 
 
    .enter() 
 
    .append("rect"); 
 

 
rects.attr("y", 40) 
 
    .attr("x", d => d * 25) 
 
    .attr("height", 20) 
 
    .attr("width", 20) 
 
    .attr("stroke", "gray") 
 
    .attr("fill", d => color(d)); 
 

 
d3.selectAll("button").on("click", function() { 
 
    color.range(ranges[this.value]); 
 
    rects.attr("fill", d => color(d)) 
 
})

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<button value="range1">Range1</button> 
 
<button value="range2">Range2</button> 
 
<button value="range3">Range3</button> 
 
<button value="range4">Range4</button>