Live-zeichnen einer Linie in D3.js

Ich bin gerade angefangen mit D3.js und ich will etwas schaffen, wie das, was wir tun, in Paint eine Linie zeichnen. Die Schritte sollten die gleichen sein werden:
- Klicken Sie auf einen Punkt auf dem Bildschirm
- Ziehen Sie, um das Ziel zu schaffen, eine Linie.

Was ich die Probleme jetzt ist, wenn Sie ziehen Sie Ihre Maus, um das Ziel, die Linie bewegen sollte, nach der Maus. Wie kann ich das tun?

Dank.

  • Könnten Sie ein Beispiel des Codes auf jsbin.com oder jsfiddle so konnten wir sehen, was es gerade tut?
  • Ohne code ist es schwer zu sehen, genau das, was Sie suchen, aber diesen code ziemlich viel hat das ziehen (mit anderen Funktionen, die Sie nicht brauchen kann, aber einen Blick Wert)
InformationsquelleAutor wayne | 2013-08-16
  1. 24

    Hier ist ein einfaches Beispiel. Siehe auch live-version.

    var line;

var vis = d3.select("body").append("svg")
    .attr("width", 600)
    .attr("height", 400)
    .on("mousedown", mousedown)
    .on("mouseup", mouseup);

function mousedown() {
    var m = d3.mouse(this);
    line = vis.append("line")
        .attr("x1", m[0])
        .attr("y1", m[1])
        .attr("x2", m[0])
        .attr("y2", m[1]);

    vis.on("mousemove", mousemove);
}

function mousemove() {
    var m = d3.mouse(this);
    line.attr("x2", m[0])
        .attr("y2", m[1]);
}

function mouseup() {
    vis.on("mousemove", null);
}

    Ich denke, das Teil, das Sie suchen, ist in der mousemove event-handler, wo wir wählen Sie die aktuelle Zeile und stellen Sie den Ziel-Punkt auf der Grundlage der aktuellen Mausposition. Beachten Sie, dass wir nur aktivieren mousemove im mousedown zu vermeiden, überflüssige Verarbeitung.

    InformationsquelleAutor Yony
Schreibe einen Kommentar