显示 CSV 数据 - 1 行，多条 d3/dimplejs答案

【问题标题】：Display CSV data - 1 row, several bars with d3/dimplejs显示 CSV 数据 - 1 行，多条 d3/dimplejs
【发布时间】：2015-06-13 07:19:47
【问题描述】：

例如，我有一个包含 1 行数据的简短 csv 文件：

ID,AmountX,AmountY,AmountZ
1,2,1,7

现在我的图表应该显示 3 个条形 - 一个是 2 个单位高，一个是 1 个单位高，一个是 7 个单位高。
但我根本无法让它工作..这是我的代码：

<head>
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="http://dimplejs.org/dist/dimple.v2.1.2.min.js"></script>
</head>
<body>
<div id="chartContainer">
  <script type="text/javascript">
    var svg = dimple.newSvg("#chartContainer", 590, 400);
    d3.csv("tester.csv", function (data) {
      var myChart = new dimple.chart(svg, data);
      myChart.setBounds(60, 30, 510, 305)
      myChart.addCategoryAxis("x", ["AmountX", "AmountY", "AmountZ"]);
      myChart.addMeasureAxis("y", "AmountZ");
      myChart.addSeries(null, dimple.plot.bar);
      myChart.addLegend(65, 10, 510, 20, "right");
      myChart.draw();
    });
  </script>
</div>
</body>

我在这里做错了什么？

改成 JSON：

{
    "H1Amount": 2,
    "H2Amount": 4,
    "H3Amount": 14,
    "H4Amount": 0
}

还有 HTML：

<head>
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="http://dimplejs.org/dist/dimple.v2.1.2.min.js"></script>
</head>
<body>

<div id="chartContainer">
  <script type="text/javascript">
    var svg = dimple.newSvg("#chartContainer", 590, 400);

    var x = null,
        y = null;

    d3.json("test.json", function (data) {
        var myChart = new dimple.chart(svg, data);
        myChart.setBounds(60, 30, 510, 305)

        x = myChart.addMeasureAxis("x", ["H1Amount", "H2Amount", "H3Amount"]);
        x.overrideMin = 0;  
        x.overrideMax = 40;   

        myChart.addMeasureAxis("y", "H1Amount");
        myChart.addSeries(null, dimple.plot.bar);
        myChart.addLegend(65, 10, 510, 20, "right");
        myChart.draw();
    });
  </script>
</div>

</body>

但是现在我收到了一个白页 - 知道它是从哪里来的吗？
如何调试那里发生的事情？

【问题讨论】：

如果您查看文档 github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#data，您似乎需要使用 JSON 表示您的数据。
好的 .. 无论如何，它以后都需要是 JSON。但现在我得到一个白页。我如何调试那里发生的事情？您发现明显的问题了吗？
我正在玩弄它并进行测试和尝试 - 我无法摆脱这种感觉，即这些东西工作正常，但条形图在同一位置被覆盖。因此，图表中只显示了一个条形图。这可能吗？

标签： csv d3.js dimple.js

【解决方案1】：

我已经让它工作了，我猜它是关于数据模型的。来自 MySQL 和关系数据库建模，我想我只是使用了错误的方法，并自动尝试在 PHP 中进行规范化（我在其中生成 JSON）。
阅读这篇关于 NoSQL 数据建模的大量文章：https://highlyscalable.wordpress.com/2012/03/01/nosql-data-modeling-techniques/ 让我进一步了解 JSON 数据的外观。
感谢您的帮助 - 通过花一整天的时间研究这个问题，我们也更深入地了解了 d3/dimple。

<head>
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="http://dimplejs.org/dist/dimple.v2.1.2.min.js"></script>
</head>
<body>

<h1>Titles</h1>
<div id="chartContainer">
  <script type="text/javascript">
    var svg = dimple.newSvg("#chartContainer", 400, 300);
    var x = null,
    y = null;
    d3.json("test.json", function (error, json) {
        var myChart = new dimple.chart(svg, json);
        myChart.setBounds(60, 30, 310, 205)
        x = myChart.addCategoryAxis("x", ["label"]);
        y = myChart.addMeasureAxis("y", ["value"]);
        myChart.addSeries("Titles",  dimple.plot.bar);
        myChart.addLegend(65, 10, 300, 20, "right");
        myChart.draw();
    });
  </script>
</div>
</body>

现在改变 / 的 JSON 被“非规范化”了：

[
    {
        "label": "H1Amount",
        "value": 2
    },
    {
        "label": "H2Amount",
        "value": 4
    },
    {
        "label": "H3Amount",
        "value": 5
    },
    {
        "label": "H4Amount",
        "value": 1
    }
]

【讨论】：

太棒了！自从您发布解决方案后，我 +1 了！