D3.js Diagramm aufrufen und neu plotten Bereich nach gezoomt

Question

Ich bin ziemlich neu zu d3.js. Ich habe Multi-Liniendiagramm mit einigen Daten und Diagramm haben Zoom-Funktionalität, die ziemlich gut funktioniert. Nun wollte ich Schatten Bereich unter dem unteren Linie, die ich im folgenden Code nicht mit: -

var area = d3.svg.area() 
    .x(function(d) { return x(d.x); }) 
    .y0(height) 
    .y1(function(d) { return y(d.y); }); 

svg.append("path") 
    .datum(dataBelowLine) 
    .attr("class", "areaAbove") 
    .attr("d", area); 

Jetzt, da ich Zoom & Drag-Funktionalität habe, ich Bereich gefüllt werden soll auch aktualisiert werden, wenn Diagramm gezoomt wird oder gezogen. Grundsätzlich möchte ich, dass der Bereich unterhalb der letzten Zeile auch nach dem Zoomen oder Ziehen gefüllt wird.

Area update not working after zoom

unten gezoomt Funktion: -

function zoomed() { 
     svg.select(".areaAbove").call(area); 

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

     svg.selectAll('path.line').attr('d', line); 

     points.selectAll('circle').attr("transform", function(d) { 
      return "translate(" + x(d.point.x) + "," + y(d.point.y) + ")"; } 
     ); 
    } 

JS Fiddle code

Answer 1

Sie müssen den Bereich d Attribut in Ihrer Zoom-Funktion Handler aktualisieren:

function zoomed() { 
    svg.select(".areaAbove").call(area); 

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

    svg.selectAll('path.line').attr('d', line); 

    svg.select('.areaAbove').attr('d', area); //<-- add this! 

    points.selectAll('circle').attr("transform", function(d) { 
    return "translate(" + x(d.point.x) + "," + y(d.point.y) + ")"; 
    }); 
} 

Ein weiteres Problem Sie ‚Ll haben ist, dass Sie nicht den Clip-Pfad zu Ihrer Umgebung anwenden:

svg.append("path") 
    .datum(dataBelowLine) 
    .attr("class", "areaAbove") 
    .attr("d", area) 
    .attr("clip-path", "url(#clip)"); 

fiddle aktualisiert.