path and click

A simple path that extends to wherever you click.

by Igor Cuckovic

JavaScript

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

var data = [
    {x: 0, y: 0},
    {x: 0, y: 10},
    {x: 10, y: 0},
    {x: 20, y: 10},
    {x: 27, y: 20},
    {x: 40, y: 60},
    {x: 50, y: 30},
    {x: 200, y: 152},
    {x: 355, y: 48}
];
  

var tx = 50;
var ty = 50;

var line = d3.svg.line()
  .x(function (d) {return d.x;})
  .y(function (d) {return d.y;});

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

var path = group.selectAll("path")
	.data([data])
	.enter()
	.append("path")
.attr("d", line )
	.attr({
      "fill": "none",
      "stroke": "black"
    });

var text = group
	.append("text")
	.text(line(data))

svg.on("click", function () {
  var p = d3.mouse(this);
  data.push({x: p[0] - tx, y: p[1] - ty})
  path.attr("d", line)
  text.text(line(data))
	
})