D3 ajoute des lignes supplémentaires entre les points

Question

J'ai un graphique de lignes et de points D3, qui fonctionne, sauf qu'il ajoute des lignes supplémentaires entre des points sans rapport :

Le code est dans ce violon : https://jsfiddle.net/8gzv7rrh/1/ les données ne fonctionnent pas, cependant, car elles proviennent d'une websocket qui n'est pas incluse dans le fiddle.

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));

}

Je ne sais pas pourquoi il ajoute ces lignes supplémentaires.

Answer 1

Assurez-vous que le jeu de données est ordonné. D3 reliera les points de données dans l'ordre où ils apparaissent dans l'ensemble de données, et pas nécessairement dans l'ordre que la composante x du point de données suggérerait.