Question

我正在根据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);

如何从路径中删除最后一个元素（即删除一个线段）？删除元素的类似示例涉及更改数据数组，以及通过exit重新初始化。在'圆圈'的情况下，这看起来像：

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

然而，这种方法不适用于路径。有什么想法吗？

Answer 1

将data.shift()替换为data = data.splice(0, data.length - 1)

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

Answer 2

您可以在将最后一个数据元素传递给d3之前将其删除。如果您将调用移至.data()进一步向下移动到附加路径的位置，您的代码会更清晰，因为它仅在那里使用，例如

data.shift();
svg.selectAll("path").data(data).enter()
  .append("path")
  .attr("class", "line")
  .attr("d", line);

删除D3中的线元素

2 个答案: