2012-06-20 1 views
9

Estoy tratando de crear un gráfico de barras con una escala de tiempo donde es posible hacer zoom en cualquier período de tiempo. Pude crear la funcionalidad de zoom para mi eje x (escala de tiempo), pero mis datos (en este caso, rec) no se acercan con mi eje.Zoom gráfico de barras con d3.js

Aquí hay una versión simplificada de mi gráfico: http://jsfiddle.net/gorkem/Mf457/5/embedded/result/ Como puede ver, puedo acercar mi eje x pero las barras no se acercan.

y aquí está el enlace jfiddle: http://jsfiddle.net/gorkem/Mf457/6/

var y = d3.scale.linear().domain([0, max_val]).range([graph_height, 0]); 
var x = d3.time.scale().domain([minDate, maxDate]).range([0, graph_width]); 

var chart = d3.select(location).append("svg") 
    .attr("class", "chart") 
    .attr("width", graph_width+20) 
    .attr("height", graph_height+20) 
    .call(d3.behavior.zoom().x(x).scaleExtent([1, 8]).on("zoom", zoom)); 

var lines = chart.selectAll("line"); 

var lines_y = lines 
    .data(x.ticks(5)) 
    .enter().append("line") 
    .attr("x1", x) 
    .attr("x2", x) 
    .attr("y1", function (d) {return graph_height - 20 - d;}) 
    .attr("y2", graph_height) 
    .style("stroke", "#ccc"); 

var lines_x = lines 
     .data(y.ticks(10)) 
     .enter().append("line") 
     .attr("x1", 0) 
     .attr("x2", graph_width) 
     .attr("y1", y) 
     .attr("y2", y) 
     .style("stroke", "#ccc"); 

xAxis = d3.svg.axis().scale(x); 
yAxis = d3.svg.axis().scale(y).orient("left"); 

chart.append("svg:g") 
    .attr("class", "xaxis") 
    .attr("transform","translate(0,300)") 
    .call(xAxis); 
chart.append("svg:g") 
    .attr("class", "yaxis") 
    .attr("transform", "translate(25,0)") 
    .call(yAxis); 


var rect = chart.selectAll("rect") 
    .data(data) 
    .enter().append("rect") 
    .attr("x", function (d,i) {return x(new Date(d["date"]))+20; }) 
    .attr("y", function (d,i) { return graph_height - (d["num"] *v_scale);}) 
    .attr("width", x(new Date(data[1]["date"]))) 
    .attr("height", function (d,i) {return d["num"]*v_scale;}); 

rect.call(d3.behavior.zoom().x(x).scaleExtent([1, 8]).on("zoom", zoom)); 

function zoom() { 
    chart.select(".xaxis").call(xAxis); 
    chart.select(".yaxis").call(yAxis); 
} 

}

Siento que debería ser la adición de más funcionalidad a mi función de zoom para que la función sea eficaz en bares (rectas). Realmente apreciaria cualquier ayuda.

Respuesta

8

Usando 'selectAll', he aplicado la escala y la traducción a cada barra respectivamente, restringiendo tanto la escala como la traslación al eje x solamente.

function zoom() { 
    chart.select(".xaxis").call(xAxis); 
    chart.select(".yaxis").call(yAxis); 
    chart.selectAll(".chart rect").attr("transform", "translate(" + d3.event.translate[0] + ",0)scale(" + d3.event.scale + ", 1)"); 
} 

Esto funciona igual de bien con un solo elemento de la ruta, que es lo que estaba tratando de averiguar cuando me topé con su pregunta.

+0

muchas gracias has hecho mi día –

+1

El enlace parece estar roto. – chhantyal

0

Me pregunto lo mismo, así que al menos sé que estás en buena compañía. Aquí está mi enfoque actual. Antes que nada, no puedo generar un diagrama de tu código y los enlaces no me envían a nada útil, no se muestran gráficos. Entonces no puedo ayudar con su problema específico. Sin embargo, hay un ejemplo que tiene rectángulos ampliables aquí: http://bl.ocks.org/1962173. Actualmente estoy revisando y borrando elementos innecesarios para ver si puedo hacerlo funcionar. ¡Espero que esto ayude!