基本 D3.js：创建或更新元素？答案

【问题标题】：Basic D3.js: create or update element?基本 D3.js：创建或更新元素？
【发布时间】：2012-08-29 19:49:48
【问题描述】：

基本 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);
}

【问题讨论】：

我的一个问题的答案可能会有所帮助：stackoverflow.com/questions/11529389/…

标签： javascript d3.js

【解决方案1】：

关注this example。做法是这样的：

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

【讨论】：