Question

作为一个例子，我有一个包含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>

但现在我收到一个白页 - 任何想法来自何处？我该如何调试那里发生的事情？

Answer 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
    }
]

显示CSV数据 - 1行，带d3 / dimplejs的多个条形图

1 个答案: