Cómo actualizar el eje con d3.js

Estoy tratando de mostrar diferentes datos en un gráfico. El usuario puede cambiar los datos mostrados haciendo clic en un botón de radio. Estoy usando un “Gráfico de burbujas” para representar los datos.

Para cada tipo de datos necesito actualizar el Yaxis (el dominio es diferente). Esto es lo que hice por ahora:

Inicialización de gráfico

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

Inicializar el eje

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

Actualiza la tabla

  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(dh);}) .attr("cy", function(d,i) {return y(dv);}) .attr("r", function(d,i) {return r(Math.sqrt(dv));}) .style("fill", function(d,i) {return color(dv);}) .style("opacity", function(d,i) {return o(dv);}) .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(dv);}).attr("stroke-width", 0);}) .append("title") .text(function(d) { return d.v+' '+ d.t+' (adjusted) - '+ dd }) .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); } 

Los círculos se actualizan correctamente (las transiciones no funcionan, pero los ejes no cambian y no veo por qué). Estoy un poco perdido, he visto muchos ejemplos pero no puedo ver lo que estoy haciendo mal.

Estoy usando la versión d3.js: v3.1.10

Maxime

Parece que está utilizando el selector incorrecto al actualizar los ejes:

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

tal vez debería leer:

  svg.selectAll("gyaxis") .call(yAxis); svg.selectAll("gxaxis") .call(xAxis); 

¿Por qué estás usando “g .y.axis”?

Tratar:

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

Y similar para eje x