我正在创建交互式可视化,根据用户的输入过滤源数据。我试图将更新的数据传递给d3,但是它不起作用。
创建热图的核心代码:
var cals = d3.select("body").append("svg").selectAll("g")
.data(yearlyData)
.enter()
.append("g")
.attr("id","svgGroup")
.attr("transform",function(d,i){
return "translate(0,"+(yOffset+(i*(height+calY)))+")";
})
var dataRects = cals.append("g")
.attr("id","dataDays")
.selectAll(".dataday")
.data(function(d){
return d.values;
})
.enter()
.append("rect")
.attr("fill", function(d) {
....
})
我有一个回调函数来更新热图:
function update(newData){
dataRectsGlo.data(newData).transition()
.duration(500)
.attr("height",33)
.attr("fill", function(d) {
if (d.DEPARTURE_DELAY<breaks[0]) {
return colours[1];
}
for (i=0;i<breaks.length+1;i++){
if (d.DEPARTURE_DELAY>=breaks[i]&&d.DEPARTURE_DELAY<breaks[i+1]){
return colours[i+1];
}
}
if (d.DEPARTURE_DELAY>breaks.length-1){
return colours[breaks.length]
}
})
}
该代码无效。我认为问题出在如何将Newdata传递给D3。我是D3的新手。我可以帮忙吗?
谢谢!