03 d3 Kreis mit Klick auf die SVG-Fläche bringen

• „click“ bestimmt eine position, schreibt dies in das array „data“ und bringt dort einen circle an.
• mit „drag“ lässt sich ein circle verschieben

append(‚HTML-TAG‘), attr(’name‘,’wert‘), style(’name‘,’wert‘)

var punkte = [];

var svg = d3.select("#no_gallery").append("svg").attr("class", "col-md-12")
 .style("min-height", "300px").style("border", "1px solid rgba(100,100,100,1)")
 .on("click", click);

var refreshGraph = function() {
 svg.selectAll("circle").data(punkte).enter()
 .append("svg:circle")
 .attr("r", 10).attr("cx", function(d) { return d.x }).attr("cy", function(d) { return d.y }) 
 .style("fill", "green").style("cursor", "pointer")
 .call(drag);
 } 

function click(){
 if (d3.event.defaultPrevented) return; 
 var point = d3.mouse(this), p = {x: point[0], y: point[1] };
 punkte.push(p)
 refreshGraph()
 console.log(punkte); //considering dot has a title attribute
}

var drag = d3.behavior.drag()
 .origin(function(d) { return d; })
 .on("dragstart", dragstarted)
 .on("drag", dragged)
 .on("dragend", dragended);

function dragstarted(d) {
 d3.event.sourceEvent.stopPropagation();
 d3.select(this).classed("dragging", true);
}

function dragged(d) {
 d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
}

function dragended(d) {
 d3.select(this).classed("dragging", false);
}