[英]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.