Javascript D3：如何只加载一半的数据

编辑：我在文章末尾添加了行的外观

我一直试图只将前半部分数据加载到一个折线图上，但我遇到了一些问题

我原以为接收“行”（即返回的所有内容）并将其减半是可行的，但它不会向屏幕返回任何内容。如果你们能看到我错过了什么

我必须解析fullData以生成一个全新的对象，而不仅仅是引用行，这意味着一旦我将数据切成两半，它实际上会删除数据，因此我以后无法将其重新加载

d3.csv(data, function(d) {
  return {
    month: parseDate(d.month),
    price: Number(d.price.trim().slice(1))
  };
}).then(function(rows) {
  max = d3.max(rows, function(d) {
    return d.price;
  });
  minDate = d3.min(rows, function(d) {
    return d.month;
  });
  maxDate = d3.max(rows, function(d) {
    return d.month;
  });
  let fullData = JSON.parse(JSON.stringify(rows));

  let halfData = fullData.splice(0, Math.floor(fullData.length / 2)); //this doesn't load properly

  var y = d3
    .scaleLinear()
    .domain([0, max])
    .range([height, 0]);

  var x = d3
    .scaleTime()
    .domain([minDate, maxDate])
    .range([0, width]);

  var yAxis = d3.axisLeft(y);
  var xAxis = d3.axisBottom(x);

  var line = d3
    .line()
    .x(function(d) {
      return x(d.month);
    })
    .y(function(d) {
      return y(d.price);
    })
    .curve(d3.curveCardinal);

  var svg = d3
    .select(".chart")
    .append("svg")
    .attr("id", "svg")
    .attr("height", "100%")
    .attr("width", "100%");

  var chartGroup = svg
    .append("g")
    .attr("class", "chartGroup")
    .attr("transform", "translate(" + xNudge + "," + yNudge + ")");

  chartGroup
    .append("path")
    .attr("class", "line")
    .attr("d", function(d) {
      return line(halfData);
    });

  chartGroup
    .append("g")
    .attr("class", "axis x")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

  chartGroup
    .append("g")
    .attr("class", "axis y")
    .call(yAxis);
});

返回哪些行：

    (96) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, columns: Array(2)]
0
:
{month: Wed Jan 01 2003 00:00:00 GMT+0000 (Greenwich Mean Time), price: 54}
1
:
{month: Sat Feb 01 2003 00:00:00 GMT+0000 (Greenwich Mean Time), price: 54}
2
:
{month: Sat Mar 01 2003 00:00:00 GMT+0000 (Greenwich Mean Time), price: 50}
3
:
{month: Tue Apr 01 2003 00:00:00 GMT+0100 (Irish Standard Time), price: 52}
4
:
{month: Thu May 01 2003 00:00:00 GMT+0100 (Irish Standard Time), price: 53}
5
:
{month: Sun Jun 01 2003 00:00:00 GMT+0100 (Irish Standard Time), price: 49}
6
:
{month: Tue Jul 01 2003 00:00:00 GMT+0100 (Irish Standard Time), price: 51}
7
:
{month: Fri Aug 01 2003 00:00:00 GMT+0100 (Irish Standard Time), price: 52}
8
:
{month: Mon Sep 01 2003 00:00:00 GMT+0100 (Irish Standard Time), price: 54}
9
:
{month: Wed Oct 01 2003 00:00:00 GMT+0100 (Irish Standard Time), price: 52}
10
:
{month: Sat Nov 01 2003 00:00:00 GMT+0000 (Greenwich Mean Time), price: 50}

---

我昨天就知道了，我就是这样做的

if (completed === false) {
        rows.splice(Math.floor(rows.length / 2), rows.length);
      }

---

我有一个名为completed的全局变量，它被设置为false。false将数据一分为二，只显示数据的前一半。

为什么要串接然后再次解析它？@FrankerZ和Tom Fenech:这是JavaScript中的一种深度克隆方法。我们一直都是这样做的。@MrShedford注意

JSON.parse（JSON.stringify（rows））

对于深度克隆，它不适用于日期对象（您有）。当然可以，但在下一行使用

slice

并直接处理行似乎更有意义。如果在问题中添加一些示例输入数据，则调试问题会容易得多。目前有一些事情看起来是错误的，但很难给你的问题提供任何明确的解决方案。