D3: Einfache Interaktion - Kreis mit einem Klick

Question

Ich lerne D3. Ich kenne einfache Dinge wie das Erstellen eines Streudiagramms und alles. Mein nächster Schritt ist ein paar einfache interaktive Bewegungen. Zum Beispiel, nachdem ich eine Svg angehängt, Achsen und Gitter gemacht habe, möchte ich jetzt einen Kreis machen, indem ich auf einen Punkt innerhalb der SVG-Leinwand klicke. Ich denke, ich muss die Koordinate des angeklickten Punktes aufzeichnen und dann einen Kreis mit seiner cx nad cy anhängen, aber wie? Wie notiere ich die Koordinate?

Ich schätze, Sie zeigen mir ein Tutorial, geben einen Hinweis oder am besten ein Beispiel.

Answer 1

Wenn Sie mit JQuery vertraut sind, sollte D3 ein freundliches Gefühl haben, da es eine ähnliche API teilt. Speziell in Bezug auf .on(action, fn) Syntax für das Anhängen eines Ereignis-Listeners an eine DOM-Auswahl.

Wenn Sie die jsFiddle Ich habe erstellt, die implementiert eine sehr grundlegende Implementierung von was Sie danach sind, können Sie dies in Bewegung in 21 Zeilen von JS sehen.

(function() { 
    var svg = d3.select('svg'); 

    function getRandom(min, max) { 
     return Math.floor(Math.random() * (max - min) + min); 
    } 

    function drawCircle(x, y, size) { 
     console.log('Drawing circle at', x, y, size); 
     svg.append("circle") 
      .attr('class', 'click-circle') 
      .attr("cx", x) 
      .attr("cy", y) 
      .attr("r", size); 
    } 

    svg.on('click', function() { 
     var coords = d3.mouse(this); 
     console.log(coords); 
     drawCircle(coords[0], coords[1], getRandom(5,50)); 
    }); 
})(); 

Die wichtigsten Aspekte dieser Schnipsel sind auf den Linien 18-20 (.on(...) und d3.mouse(this)). Das Ereignis on('click',..) ist an das Element svg angehängt. Wenn ein Klick auftritt, wird d3.mouse mit dem aktuellen Bereich als sein Argument aufgerufen. Es gibt dann ein Array mit x- und y-Koordinaten des Mausereignisses zurück. Diese Informationen werden dann zusammen mit einem zufälligen Radius an drawCircle übergeben, um einen Kreis auf der aktuellen SVG-Arbeitsfläche zu zeichnen.

Ich empfehle Ihnen, die jsFiddle und haben ein Spiel nehmen!