Wie zu beheben d3.js Diagramm Skalierung

Question

Ich möchte this.

Aber wenn ich es zoome, ist die Linie außerhalb des Bereichs.

Liniendefinition:

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

und dann dieser Code:

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

Können Sie helfen, wie man es beheben?

thx.

EDIT: Dieser Code für Zoom:

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

Ich habe mehrere Diagramme auf Seite. Von 1 bis 5 - für diesen Zweck ich anhängen _{number}

Answer 1

Es sieht aus wie Sie clip-path Stil nicht angewendet haben. Wenn Sie diesen Stil in Blöcke abschalten, die Sie erwähnten es wie Ihr Bildschirm aussehen wird, (siehe Demo gif unten):

Überprüfen Sie, ob Sie defs Element und clipPath Element als Kind anhängen für defs:

svg.append("defs").append("clipPath") 
    .attr("id", "clip") 
    .append("rect") 
    .attr("width", width) 
    .attr("height", height); 

überprüfen Sie auch, dass Sie diese Art haben:

.line { // <== this class name should be on your line/area 
    clip-path: url(#clip); // <== !!! 
}