使用滑塊更新D3熱圖顏色範圍

我使用D3和JQuery滑塊來生成熱圖，當我更改滑塊（表示顏色比例範圍）的光標位置時，其顏色會自動刷新。雖然當我第一次點擊滑塊時它工作正常，但它似乎沒有刷新後。我發佈源的情況下，你想指出我的錯誤：使用滑塊更新D3熱圖顏色範圍

<HEAD> 
<TITLE>Heatmap</TITLE> 
</HEAD> 
<BODY BGCOLOR="WHITE"> 

<CENTER> 
<H1>Heatmap</H1> 

<H5>Heatmap should instantly display bidimensional data (adjustable thresholds)</H5> 




<script src="http://d3js.org/d3.v3.min.js"></script> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" /> 
<script src="http://code.jquery.com/jquery-1.8.3.js"></script> 
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
<link rel="stylesheet" href="/resources/demos/style.css" /> 

<div id="slider"></div> 
<p> 
<div id="heatmap"></div> 

<script> 

var minval= 0; 
var maxval= 1000; 


$("#slider").slider({ 
    range: true, 
    min: 0, 
    max: 1000, 
    values: [0, 1000], 
    slide: function(event, ui) { 
     var minval = ui.values[0]; 
     var maxval = ui.values[1]; 
     console.log("begin:", minval, "end:", maxval); 
     draw(minval, maxval); 
    } 
}); 


var margin = {top: 0, right: 20, bottom: 20, left: 20}, 
    width = 300 - margin.left - margin.right, 
    height = 300 - margin.top - margin.bottom; 

var svg = d3.select("#heatmap").append("svg:svg"); 

var data = [[1000,500,1],[500,1,1000],[1000,54,800]]; 

var x = d3.scale.linear() 
    .range([0, width]) 
    .domain([0,data[0].length]); 

var y = d3.scale.linear() 
    .range([0, height]) 
    .domain([0,data.length]); 

svg.attr("width", width + margin.left + margin.right) 
     .attr("height", height + margin.top + margin.bottom) 
     .append("g") 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

var colorLow = 'white', colorMed = 'green', colorHigh = 'red'; 


function draw(minval,maxval){ 

    var colorScale = d3.scale.linear() 
     .domain([minval, maxval]) 
     .range([colorLow, colorHigh]); 

    var row = svg.selectAll(".row") 
      .data(data) 
      .enter().append("svg:g") 
      .attr("class", "row"); 

    var col = row.selectAll(".cell") 
       .data(function (d,i) { return d.map(function(a) { return {value: a, row: i}; }) }) 
       .enter().append("svg:rect") 
       .attr("class", "cell") 
       .attr("x", function(d, i) { return x(i); }) 
       .attr("y", function(d, i) { return y(d.row); }) 
       .attr("width", x(1)) 
       .attr("height", y(1)) 
       .style("fill", function(d) { return colorScale(d.value); }); 

} 



</script> 
</head> 
<body> 

</CENTER> 
</body>

來源

2013-01-08 Alberto

，因爲你是在.enter()選擇，這將是空的，第二次draw()工作實在不行，第二次叫因爲這些元素已經存在。

若要解決此問題，請將row和col的聲明移到draw()函數之外。在draw()函數內部，只保留實際更改的代碼。類似於

function draw(minval,maxval){ 
    var colorScale = d3.scale.linear() 
     .domain([minval, maxval]) 
     .range([colorLow, colorHigh]); 
    col.style("fill", function(d) { return colorScale(d.value); }); 
}

來源

2013-01-08 18:46:00

非常感謝！ – Alberto

使用滑塊更新D3熱圖顏色範圍

回答

相關問題