D3在点之间添加额外的线[重复]

Question

我有一个 D3 线和点图，它正在工作，除了它在不相关的点之间添加了额外的线：

代码在这个小提琴中：https://jsfiddle.net/8gzv7rrh/1/ 但是数据不起作用，因为它来自一个未包含在小提琴中的 websocket。

var margin = {
    top: 20,
    right: 20,
    bottom: 30,
    left: 50
  },
  width = 600 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;

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

var x = d3.scaleLinear().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);

var valueline = d3.line()
.x(function(d) {
  return x(d.time);
})
.y(function(d) {
  return y(d.value);
});

var xaxis = svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));

var yaxis = svg.append("g")
.attr("class", "y axis")
.call(d3.axisLeft(y));

function graphData(data) {
  x.domain(d3.extent(data, function(d) {
    return d.time;
  }));
  y.domain(d3.extent(data, function(d) {
    return d.value;
  }));  

  var circles = svg.selectAll("circle")
    .data(data);

  circles.exit().remove();

  circles.enter().append("circle")
    .attr("r", 2)
    .merge(circles)
        .attr("cx", function(d) {
        return x(d.time);
        })
        .attr("cy", function(d) {
        return y(d.value);
        });

  var line_graph = svg.selectAll(".line")
    .data([data])

  line_graph.exit().remove();

  line_graph.enter().append("path")
    .attr("class", "line")
    .merge(line_graph)
        .attr("d", valueLine);

  svg.select(".x").call(d3.axisBottom(x));
  svg.select(".y").call(d3.axisLeft(y));

}

我不知道为什么要添加这些额外的行

Answer 1

确保数据集是有序的。 D3 将按照数据点在数据集中出现的顺序链接数据点，不一定按照数据点的 x 分量建议的顺序