02 d3 einen Kreis auf die SVG-Fläche

• Erzeugt die Variable circle.
• circle <circle></circle> wird in das SVG_Element svgContainer eingesetzt.
• circle wird durch cx, cy und r definiert. svg-Koordinaten beginnen oben links.
• Mit „stroke“, „fill“und „cursor“ werden Füllung, Umriss und Mauszeiger definiert.
• „mouseenter“, „mouseleave“ und „mouseup“ werden mit .on an circle gehängt und bereiten circle als Button vor.

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

var circle = svgContainer.append("circle")
   .attr("cx", 30)
   .attr("cy", 30)
   .attr("r", 20)
   .style("stroke", "rgba(100,100,100,1)")
   .style("fill", "rgba(10,10,10,.5)");
   .on("mouseenter", function() {d3.select(this).style("fill", "rgba(255,10,10,.5)");})
   .on("mouseleave", function() {d3.select(this).style("fill", "rgba(10,10,10,.5)");})
   .on("mouseup", function() {console.log(this);});