D3 Dynamic change of Y-axis

Question

I would like to create a dynamic graph with several (linear) axes. After the axes have been drawn, I would like (as new data arrives) to change the data domain and redraw / update the axes. Can I select an existing axis with D3 and do this, or should I explicitly store each axis in my code? I hope my question does not confuse.

// init all Y-Axis
$.each(chart.YAxes, function (index) {
            var yScale, yAxis;
            yScale = d3.scale.linear().range([chartHeight, 0]);
            yScale.domain([this.YMin, this.YMax]);

            yAxis = d3.svg.axis()
                        .scale(yScale)
                        .ticks(10, this.Title)
                        .orient("left");

            d3Chart.append("g")
                   .attr("class", "yAxis " + "y" + this.ID)
                   .call(yAxis);
......

// update Y-Axis (after new data arrives...)
var myYAxis = d3.select(".y" + yAxis.ID);
var myScale = myYAxis. **// get Scale ??**
myScale.domain([newYMin, newYMax]);   
d3Chart.select(".y" + yAxis.ID)
            .transition().duration(300).ease("sin-in-out")
            .call(myYAxis);

THX ...

Answer 1

You need to save references to the axis object so that you can call it again. Choosing a DOM element that contains it, and a call that will not work. There are many examples of how to update axes, for example. into this question .