使用滑块更新D3热图颜色范围
D3 heatmap color range updating with slider
我使用D3和JQuery滑块来生成一个热图,当我改变滑块光标的位置(它代表颜色范围)时,它的颜色会自动刷新。虽然它的工作很好,当我第一次点击滑块,它似乎没有刷新之后。如果你想指出我的错误,我把源代码贴出来:
<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>
它第二次不起作用,因为您正在操作.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); });
}
相关文章:
- 如何使用D3生成特定范围内的随机颜色
- 如何制作具有特殊条形颜色的范围滑块
- DC.js 应用过滤器后热图颜色范围未更新
- d3.js应用不适用于 JSON 的颜色范围
- 获取与之关联的范围和颜色 - 色度.js
- 将底部边界的颜色更改为一定范围
- 使用javascript更改输入范围滑块的颜色
- 未捕获范围错误:超出最大调用堆栈大小(执行背景颜色切换器功能时)
- 在一定范围内使用paper.js进行颜色转换
- 独特的,范围的颜色在谷歌地理地图
- 高图-改变背景颜色沿特定的日期范围
- 在dc.js柱状图上的颜色问题,当过滤到一个狭窄的范围
- Highcharts列范围数据标签的高和低不同的颜色
- 如何使用脚本更改单元格背景颜色的多个范围
- d3:具有超过2种颜色的数组的颜色范围
- 使用javascript从HTML中线性渐变提供的范围中选择颜色
- 我如何在谷歌图表设置颜色范围
- 圆环图-将域映射到颜色范围(过渡)
- 使用滑块更新D3热图颜色范围
- 热图与红色的颜色范围为负值和绿色的颜色范围为正值