2

我正在创建一个基于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);

如何从路径中删除最后一个元素(即删除线段)?删除元素的类似示例包括更改数据数组,并通过退出重新初始化。在“圆圈”的情况下,这看起来像:

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

但是,这种方法不适用于路径。有任何想法吗?

4

2 回答 2

3

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

array.splice(索引, howMany[, element1[, ...[, elementN]]])

于 2012-06-06T05:22:21.770 回答
0

您可以在将最后一个数据元素传递给 d3 之前删除它。如果您将调用移到.data()附加路径的位置,您的代码会更清晰,因为它仅在此处使用,即类似

data.shift();
svg.selectAll("path").data(data).enter()
  .append("path")
  .attr("class", "line")
  .attr("d", line);
于 2012-06-01T22:06:31.230 回答