Clickable Line

_.md

[ Launch: Clickable Line ] 1d64b6cd8a6799b53c1f by emunsing

config.json

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

inlet.js

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

var data = [
    {x: 0, y: 10},
    {x: 10, y: 0},
    {x: 40, y: 30},

];
  
var line = d3.svg.line() //function that makes a line
  .x(function(d) {return d.x;})
  .y(function(d) {return d.y;});

var tx = 63;
var ty = 150;

var myGroup = svg.append("g")
  .attr("transform", "translate(" + [tx, ty] + ")")

var myLineCoords = myGroup.append("text")
	.attr("transform","translate("+[0,-20]+")")
	.text(line(data));

var myClickCoords = myGroup.append("text")
	//.attr("transform","translate("+[0,]+")")
	.text("Clicked @:");

var myPath = myGroup.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})
  myLineCoords.text(line(data))
  myClickCoords.text(p[0]+", "+p[1])
  myPath.attr("d", line)
  
  })