thisとしたいと思います。d3.jsグラフのスケーリングを修正する方法
しかし、私がズームすると、その行は領域外です。
ラインの定義:
var valueline_1 = d3.line()
.x(function (d) { return x_1(parseDate(d.date)); })
.y(function (d) { return y_1(d.count); });
var valueline2_1 = d3.line()
.x(function (d) { return x2_1(parseDate(d.date)); })
.y(function (d) { return y2_1(d.count); });
してから、このコード:
focus_1.append("path")
.data([data])
.attr("class", "line")
.attr("d", valueline_1(i));
context_1.append("path")
.data([data])
.attr("class", "line")
.attr("d", valueline2_1);
thx。
EDIT: ズームのためのこのコード:
var zoom_0 = d3.zoom()
.scaleExtent([1, Infinity])
.translateExtent([[0, 0], [width_0, height_0]])
.extent([[0, 0], [width_0, height_0]])
.on("zoom", zoomed_0);
function zoomed_0() {
if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush"
) return; // ignore zoom-by-brush
var t = d3.event.transform;
x_0.domain(t.rescaleX(x2_0).domain());
focus_0.select(".area").attr("d", area_0);
focus_0.select(".line").attr("d", valueline_0);
focus_0.select(".axis--x").call(xAxis_0);
context_0.select(".brush").call(brush_0.move, x_0.range().map(t.invertX, t));
}
私はページ上で複数のグラフを持っています。 1から5まで - この目的のために私は_{number}
は「ズーム」前夜のコードを表示ntハンドラ。 –