d3.js Beginner Board

svg.append("rect")
    .attr("width",50)
    .attr("height",50)
    .attr("y", 25)
    .attr("x", 225)
    .style("fill", "red")                           
                        
                    

svg.append("circle")
    .style("fill", "blue")
    .attr("cx", 225)
    .attr("cy", 25)
    .attr("r", 30)  // r = Radius                 
                    
                    
                   

svg.append("path")
    .attr("d","M 0 60 L 50 110 L 90 70 L 140 100")
    .style("stroke-width", 3)
    .style("stroke", "green")
    .attr("transform","translate(30,-40)");                           
                    
                    
                   

svg.append("svg:line")
  .attr("x1",0)
  .attr("y1",50)
  .attr("x2",400)
  .attr("y2",50)
  .style("stroke-width", 10)
  .style("stroke", "steelblue")
                    
                   

svg.append("svg:path")
  .attr("d","M 0 60 L 300 60 L 140 100")
  .style("stroke-width", 10)
  .style("stroke", "orange")
  .style("stroke-linecap","round")
  .style("stroke-linejoin","round")
  .style("fill", "none")                      
                    
                   

svgElement.on("click", function(){
      //Do somethings - for example
      d3.select(this).call(a_function)
      console.log("Yeahh click!")
})                    
                    
                   

   var toogle = 1;
   var createRect = function() {
      svg.append("rect")
        .attr("class","rect")
        .attr("width",150)
        .attr("height",50)
        .style("fill", "blue")
   }
   var g = button.on("click", function(){
        toogle *= -1
        var elem = svg.select(".rect")
                    .transition()
                    .duration(1000)

        if(toogle == 1) {
            elem.attr("width", 100)
        } else { 
            elem.attr("width", 50)
        }
   }); 
   var rect = g.call(createRect); 
    // The variable "createRect" contains the blue rect 
    // which occurs when the button was clicked