使用滑块更新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热图颜色范围

回答

相关问题