Zooming bar-graph mit d3.js
Ich versuche, erstellen Sie ein Balkendiagramm mit einer Zeit-Ebene, wo es ist möglich, zu Zoomen, in jede Zeit. Ich war in der Lage, erstellen Sie die Zoom-Funktionalität für meine x-Achse(Zeitskala) aber meine Daten (in diesem Fall rects) nicht zoom zusammen mit meiner Achse.
Hier ist eine vereinfachte version meiner Grafik: http://jsfiddle.net/gorkem/Mf457/5/embedded/result/
Wie Sie sehen können, kann ich zoom-in meiner x-Achse, aber die Balken nicht Zoomen entlang.
und hier ist die jfiddle link: 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);
}
}
Ich das Gefühl, ich sollte das hinzufügen von mehr Funktionalität zu meinem zoom-Funktion für die Funktion, um wirksam zu sein auf die Balken(rects). Ich würde wirklich zu schätzen jede Hilfe.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Mit 'selectAll', hab ich angewendet, die Skalierung und die translation zu jeder bar bzw. einschränken, sowohl im Umfang als auch die übersetzung auf der x-Achse nur.
Dies funktioniert ebenso gut mit einer einzigen Pfad-element, das ist was ich versucht habe, um herauszufinden, wenn stieß ich auf Ihre Frage.
Frage ich mich die gleiche Sache, also zumindest wissen, du bist in guter Gesellschaft. Hier ist mein Aktueller Ansatz. Zunächst, ich kann nicht, generieren Sie einen plot aus dem code und die links nicht senden Sie mir zu nichts nützlich-keine chart stellt. Also ich kann mir nicht helfen mit Ihrem spezifischen problem. Es gibt jedoch ein Beispiel, dass hat Zoombare Rechtecke hier: http://bl.ocks.org/1962173. Ich bin derzeit durchläuft es und löschen Sie nicht benötigte Elemente und sehen, ob ich kann, damit es funktioniert. Hoffentlich hilft!