Question

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

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

我认为采用“行”（返回的所有内容）并将其减半是可行的，但屏幕上什么也没有返回。如果你们能看到我会错过什么？

我必须解析fullData才能创建一个全新的对象，而不仅仅是引用行，这意味着一旦将数据切成两半，它实际上将删除数据，因此以后无法再次加载。 / p>

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}

Answer 1

我昨天知道了，这就是我的方法！

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

我有一个名为completed的全局变量，该变量设置为false。如果为false，则会将数据分成两半，仅显示数据的前半部分。

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

1 个答案: