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

Question

我使用D3和JQuery Slider生成一個熱圖，當我改變滑塊光標的位置（代表色階范圍）時，其顏色會自動刷新。 雖然我第一次點擊滑塊時效果很好，但之后似乎沒有刷新。 如果您想指出我的錯誤，我會發布消息來源：

<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>

Answer 1

它第二次不起作用，因為你在.enter()選項上運行，第二次調用draw()時它將為空，因為元素已經存在。

要解決此問題，請在draw()函數外部移動row和col的聲明。 在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); });
}

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

問題描述

1 個解決方案

解決方案1
3 2013-01-08 18:46:00

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

問題描述

1 個解決方案

解決方案1 3 2013-01-08 18:46:00

解決方案1
3 2013-01-08 18:46:00