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（index、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 に答える