使用 Dimple.js 进行数据处理答案

【问题标题】：Data processing with Dimple.js使用 Dimple.js 进行数据处理
【发布时间】：2020-12-09 14:17:10
【问题描述】：

我是 D3.js 的新手。我正在尝试在 dimple.js 库中构建面积图，这是我的代码：

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<div id="chartContainer">
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="http://dimplejs.org/dist/dimple.v2.0.0.min.js"></script>
  <script src="https://d3js.org/d3-time.v2.min.js"></script>
  <script type="text/javascript">
    var svg = dimple.newSvg("#chartContainer", 590, 400);
    d3.csv("Video_Game_Sales.csv", function (data) {
      data = dimple.filterData(data, "Company", ["Microsoft", "Nintendo", "Sony"])
      var myChart = new dimple.chart(svg, data);
      myChart.setBounds(70, 30, 340, 330);
      var x = myChart.addCategoryAxis("x", ["Company","Year"]);
      myChart.addPctAxis("y", "Global Sales");
      var s = myChart.addSeries("Genre", dimple.plot.area);
      s.lineWeight = 1;
      s.barGap = 0.05;
      myChart.addLegend(430, 20, 100, 300, "left");
      myChart.draw();
    });
  </script>
</div>
</html>

在控制台输出是：Error: <text> attribute x: Expected length, "Infinity".

所以我提到 Year 列中的数据是这样的：1,996, 1,997... 2,016 等。所以我决定用这行代码转换成数据格式： x.dateParseFormat="%Y";

但我仍然有同样的问题。

【问题讨论】：

标签： date d3.js type-conversion dimple.js stacked-area-chart

【解决方案1】：

有 2 个问题，不是在代码中，而是在 csv 文件本身：

在 csv 分隔符中：它是
在数据值本身的分隔符中-有,，我将其更改为.，所以它起作用了！！！ :)

PS 我没有更改 Years 字段数据类型的任何内容。

【讨论】：