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

【问题标题】：D3 : How to only load half the dataD3：如何只加载一半的数据
【发布时间】：2018-07-25 10:55:53
【问题描述】：

编辑：我在帖子末尾添加了行的样子。

我一直在尝试仅将前半部分数据加载到折线图上，但我遇到了问题。

我认为接受“行”（即返回的所有内容）并将其减半会起作用，但它不会在屏幕上返回任何内容。如果你们能看到，我错过了什么？

我必须解析 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}

【问题讨论】：

你为什么要字符串化然后再解析呢？
@FrankerZ 和 Tom Fenech：这是 JavaScript 中深度克隆的一种方式。我们一直这样做。
@MrShedford 注意JSON.parse(JSON.stringify(rows)) 进行深度克隆，它不适用于日期对象（你有）。
当然，但在下一行使用slice 并直接使用行似乎更有意义。
如果您将一些示例输入数据添加到您的问题中，那么调试您的问题会容易得多。目前有些事情看起来不对，但很难为您的问题提供任何明确的解决方案。

标签： javascript reactjs d3.js promise

【解决方案1】：

我昨天想通了，我就是这样做的！

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

我有一个名为 Completed 的全局变量设置为 false。虽然为 false，但它会将数据分成两半，并且只显示数据的前半部分。

【讨论】：