히트 맵의 색상 표를 동적으로 변경하는 방법

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>

을 그래서

,이 간단히 수행 할 수 있습니다