Zeile hinzufügen, die in D3 skaliert Zoomable Streudiagramm

Question

Ich implementierte diese Lösung: http://bl.ocks.org/peterssonjonas/4a0e7cb8d23231243e0e

Alles funktioniert perfekt.

Ich habe versucht, nur eine einfache Zeile zu diesem Diagramm hinzuzufügen und es richtig zu zoomen, ich brauche eine vertikale und eine 45 Grad von unten links nach oben rechts.

Ich kann nur einen Weg zum Zoomen finden, um richtig zu funktionieren, und ich muss nur eine einfache Zeile hier hinzufügen.

Answer 1

Wenn ich dich richtig verstehe. Sie fügen Sie einfach eine Zeile, wo Ihre Punkte zu angefügt werden:

var lineTry = objects.append('line').attr('id','lineTry') 
     .attr('x1', x(0)) 
     .attr('y1', y(-1000)) 
     .attr('x2', x(0)) 
     .attr('y2', y(1000)) 

Die oben genannten y-Werte können nun auf die Höhe des Graphen, aber die Arbeit geändert werden. Dann Schwenken oder Zoomen:

var thisTrans = d3.event.translate; 
    var thisScale = d3.event.scale 

    svg.selectAll("#lineTry") 
    .attr('x1', x(0)) 
    .attr('y1', y((-1000 + thisTrans[1])/thisScale)) 
    .attr('x2', x(0)) 
    .attr('y2', y((1000 + thisTrans[1])/thisScale)) 

verwende ich die vorherigen Werte von 1000 etc fügen die aktuelle Translation in der Y-Richtung er dann von der Skala teilen :)

aktualisiert Geige: https://jsfiddle.net/thatOneGuy/L2zvz216/2/