How to update axis using d3.js

Question

I'm trying to display different data on a graph. The user can change the displayed data clicking on a radio button. I'm using a "Bubble chart" to render the data.

For each type of data I need to update the Yaxis (the domain is different). Here is what I've done for now:

Chart initialisation

var svg = d3.select("body .main-content").append("svg")     .attr("class", "chart")     .attr("width", width)     .attr("height", height); 

Initialise the Axis

initAxis(); function initAxis() {     var y = d3.scale.linear().domain([0,1000]).range([height-margin, margin]).nice(),         x = d3.scale.linear().domain([0,23]).range([margin,width-margin]),         yAxis = d3.svg.axis().scale(y).orient("left"),         xAxis = d3.svg.axis().scale(x).orient("bottom");      svg.append("g")         .attr("class", "y axis")         .attr("transform", "translate(" + margin + ",0)")         .call(yAxis);      svg.append("g")         .attr("class", "x axis")         .attr("transform", "translate(0," + (height - margin) + ")")         .call(xAxis); } 

Update the chart

    function update(type)     {         // Get the data         type = type || 'default';         var m = max[type],             mi = min[type]+0.1,             data = dataset[type],             step = stp[type];          // Set the functions         var y = d3.scale.linear().domain([mi,m]).range([height-margin, margin]).nice();         var o = d3.scale.linear().domain([0,m]).range([.5,1]);         var r = d3.scale.linear().domain([0,Math.sqrt(m)]).range([0,30]);         var x = d3.scale.linear().domain([0,23]).range([margin,width-margin]);         var color = function (a, b) {             for (var c = (a - 0) / (m - 0), d = [], e = 0; 3 > e; e++) d.push(Math.round(K[0][e] +                     c * (K[1][e] - K[0][e])));             d.push(b || 0.7);             return "rgba(" + d.join(",") + ")"         }          //Attach the data to the graph         var circle = svg.selectAll("circle").data(data);          // Update existing element         circle.attr("class", "update");          // Add new element         circle.enter()             .append("circle")             .attr("class", "enter")             .attr("stroke-width", 0)             .attr("stroke", "black")                 .transition()                 .duration(750)                 .attr("y", 0)                 .style("fill-opacity", 1);          // Apply attribute to new and updated element         circle.attr("cx", function(d,i) {return x(d.h);})             .attr("cy", function(d,i) {return y(d.v);})             .attr("r", function(d,i) {return r(Math.sqrt(d.v));})             .style("fill", function(d,i) {return color(d.v);})             .style("opacity", function(d,i) {return o(d.v);})             .on("click", function(d,i){window.open(d.name,'_blank');})             .on("mouseover", function(d,i){d3.select(this).style("fill", "red").attr("stroke-width", 1);})             .on("mouseout", function(d,i){d3.select(this).style("fill", function(d,i) {return color(d.v);}).attr("stroke-width", 0);})             .append("title")             .text(function(d) { return d.v+' '+ d.t+' (adjusted) - '+ d.d })                 .transition()                 .duration(750)                 .attr("y", 0)                 .style("fill-opacity", 1);          // Remove old elements         circle.exit()             .attr("class", "exit")             .transition(750)             .ease("linear")             .attr("cy", 0)             .style("opacity", 0.2)             .remove();          // Update the Axis         var xAxis = d3.svg.axis().scale(x).orient("bottom");         var yAxis = d3.svg.axis().scale(y).orient("left");          svg.selectAll("g .y.axis")             .call(yAxis)          svg.selectAll("g .x.axis")             .call(xAxis);     } 

The circles are updated correctly (transitions are not working tho) but the axis are not changing and I can't see why. I'm a bit lost, I've looked at many example but I cannot see what I'm doing wrong.

I'm using d3.js version: v3.1.10

Maxime

Answer 1

It looks like you are using the wrong selector while updating the axes:

   svg.selectAll("g .y.axis")         .call(yAxis);     svg.selectAll("g .x.axis")         .call(xAxis); 

maybe should read:

   svg.selectAll("g.y.axis")         .call(yAxis);     svg.selectAll("g.x.axis")         .call(xAxis); 

Answer 2

Why are you using "g .y.axis"?

Try:

svg.select(".y.axis")     .call(yAxis); 

And similar for x axis.