Basic D3.js: create or update an item?

Question

The main question of D3.js is to handle the syntax!

I am using D3 and I want to create an axis if it does not exist, or update using a transition if it already exists.

My current code is below, but this code re-creates the axis every time - it does not go over. How can I change it to transition?

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

Answer 1

Following in this example . This approach is as follows:

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