title: How to get data from d3js polyline?
body: <p>I would like to create simple shape drawing. When I click the shape it should create a new one. For example, if I click at the top of the triangle I want the new one to appear at the top of current one, if I click on the right side, the new one appears on the right side etc. I am new to d3js so I am struggling how can I get data of the polyline on which I am clicking? For now, I managed to create a function which should do it for me and it does if I manually set new coordinates of the polyline. It creates shapes but I can't get data to manipulate it in order to draw another one. Also, It would be nice if anyone suggested how can I manage different drawing(when clicked top, draw at the top etc...). 
  <a href="https://i.stack.imgur.com/UNlGL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UNlGL.png" alt="What I have"></a></p>
  
  <pre><code>    &lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
      &lt;head&gt;
      &lt;script src="http://d3js.org/d3.v3.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;h1&gt;Hello world&lt;/h1&gt;
      &lt;body&gt;
  
      &lt;svg width="1000" height="667"&gt;&lt;/svg&gt;
  
      &lt;script&gt;
      scaleX = d3.scale.linear()
        .domain([-10,10])
        .range([75,125]),
  
      scaleY = d3.scale.linear()
        .domain([-10,10])
        .range([187.5,125]);
  
      var o = [];
      poly = [{"x":30, "y":15},
          {"x":40,"y":35},
          {"x":50,"y":15}];
  
      poly2 = [{"x":50, "y":15},
          {"x":60,"y":35},
          {"x":70,"y":15}];
  
      poly3 = [{"x":60, "y":35},
          {"x":70,"y":15},
          {"x":90,"y":35}];
  
  
      var tab = [];
      cir = [{"x": 50,"y":15,"r": 5}];
  
      o.push(poly);
      o.push(poly2);
      tab.push(cir);
  
      function draw()
      {
          var cords = [0, 0]
          d3.select("svg")
              .selectAll("polyline")
              .data(o)
              .enter().append("polyline")
              .attr("points",function(d) { 
                  return d.map(function(d) { return [scaleX(d.x),scaleY(d.y)].join(","); }).join(" ");})
              .attr("stroke","black")
              .on("mouseover", function(d) { d3.select(this).style("fill", "red") })
              .on("mouseout", function(d) { d3.select(this).style("fill", "black") })
              .on("click", function(d)
              {
                  appendTriangle(d);}
              )
              .attr("stroke-width",2);
  
      }
      function appendTriangle(triangle)
      {
  
  
          var newTriangle = [{x:triangle.x,y:triangle.y},
          {x:triangle.x,y:triangle.y},
          {x:triangle.x,y:triangle.y}];
  
  
          o.push(newTriangle);
          draw();
      }
      function appendTriangle2()
      {
          var newTriangle = [{"x":60, "y":35},
          {"x":70,"y":15},
          {"x":90,"y":35},];
  
          o.push(newTriangle);
          draw();
      }
  
      draw();
      &lt;/script&gt;
  </code></pre>