[英]Basic D3.js: create or update element?
基本的D3.js問題,掌握語法!
我正在使用D3,我想創建一個軸,如果它不存在,或者如果它已經存在則用轉換更新它。
我當前的代碼如下,但此代碼每次都重新創建軸 - 它不會轉換。 如何將其更改為過渡?
var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(4).tickSize(6, 3, 0);
updateGraphAndAxes(initialdata);
$('#button').click(function() {
updateGraphAndAxes(newdata);
});
function updateGraphAndAxes(newdata) {
// update x.domain here using newdata, then...
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
}
按照這個例子 。 方法是這樣的:
var xAxisGroup = null;
function updateGraphAndAxes(newdata) {
var t = null;
t = svg.transition().duration(1000); // Set up transition
// update x.domain using newdata...
if (!xAxisGroup) {
xAxisGroup = svg.append("g")
.attr("class", "xTick")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
} else {
t.select('.xTick').call(xAxis); // Call xAxis on transition
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.