Clickable Line

_.md

[ Launch: Clickable Line ] 5565480 by lewis500

config.json

{"description":"Clickable Line","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

inlet.js

var svg = d3.select("svg");

var data = [
  {x: 0, y: 0},
    {x: 0, y: 10},
    {x: 10, y: 0},
    {x: 20, y: 10},
    {x: 30, y: 20},
    {x: 40, y: 60},
    {x: 50, y: 30},
    {x: 60, y: 52},
    {x: 143, y: 20}
];
  
var line = d3.svg.line() //function that makes a line
  .x(function(d) {
  	return d.x;
  })
  .y(function(d) {
  	return d.y;
  });

  
var tx = 100;
var ty = 150;
var group = svg.append("g")
  .attr("transform", "translate(" + [tx, ty] + ")")

var path = group.selectAll("path")
  .data([data])
  .enter()
  .append("path")
    .attr({
      d: function(d) {
        return line(d)
      },
      fill: "none",
      stroke: "black"
    })
    
svg.on("click", function() {
  var p = d3.mouse(this);
  data.push({x: p[0] - tx, y: p[1] - ty})
   
  path.attr("d", line)
  
  })