Question

I’m creating a line chart based on https://github.com/mbostock/d3/blob/master/examples/line/line.html .

var data = [
  {x: 0, y: 3},
  {x: 1, y: 4},
  {x: 2, y: 5}
];

var margin = {top: 10, right: 10, bottom: 20, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

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

var svg = d3.select("#chart").append("svg")
    .datum(data)
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("path")
    .attr("class", "line")
    .attr("d", line);

How do I remove the last element from the path (i.e. delete a line segment)? Similar examples for removing elements involve changing the data array, and re-initializing via exit. In the case of ‘circles’ this looks something like:

data.shift();
var circles = svg.selectAll(".dot").data(data);
circles.exit().remove();

However this approach doesn’t work with path. Any ideas?

Answer 1

Replace data.shift() with data = data.splice(0, data.length - 1)

array.splice(index , howMany[, element1[, …[, elementN]]])