获取dimple.js图表

Question

我是D3的新手，并认为dimple.js是一个简单的起点。 但是，我无法在浏览器[Chrome，Firefox]中显示任何示例。

例如，此条形图不产生任何结果：

<div id="chartContainer">
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="http://dimplejs.org/dist/dimple.v1.1.5.min.js"></script>
  <script type="text/javascript">
    var svg = dimple.newSvg("#chartContainer", 590, 400);
    d3.tsv("/data/example_data.tsv", function (data) {
      var myChart = new dimple.chart(svg, data);
      myChart.setBounds(60, 30, 510, 305)
      var x = myChart.addCategoryAxis("x", "Month");
      x.addOrderRule("Date");
      myChart.addMeasureAxis("y", "Unit Sales");
      myChart.addSeries(null, dimple.plot.bar);
      myChart.draw();
    });
  </script>
</div>

我已经下载了d3js库，并将其保存在与html文件相同的目录中。 数据文件的路径已检查。 我究竟做错了什么？

Answer 1

您是否在某个地方托管页面？ 如果浏览器中的URL以file://...开头，就是问题所在。 它需要通过http提供，以引用数据，通常是"http://localhost... 。

如果这是问题所在，可以尝试多种方法。 我使用node.js运行带有express的Web服务器，这是一个很好的免费解决方案。 加上用于下载的所有配置文件，因此设置起来非常容易。

从https://github.com/PMSI-AlignAlytics/dimple/zipball/master下载zip文件并将其解压缩到本地计算机上的文件夹后，您将需要从http：// nodejs此处安装node.js。 org / 。

然后-如果使用Windows，则打开命令窗口并导航至将zip文件解压缩到的文件夹，然后运行以下命令：

npm install

这将安装package.json文件中定义的所有依赖项。 完成该运行：

node app.js

命令窗口看起来应该没有任何作用，但是如果您打开Firefox（或任何其他浏览器）并浏览到http://localhost:3000/examples/bars_horizontal.html则示例将打开，所有示例均在您的计算机上运行。

编辑：我刚刚将其写入dimple.js Wiki： https : //github.com/PMSI-AlignAlytics/dimple/wiki#wiki-installing-the-examples

Answer 2

参加聚会的时间不多，但是这可能会在将来对那些希望获得酒窝图表体验而不会造成麻烦的人有所帮助...而不是通过设置Web服务器和手动编码的麻烦，而您想使用酒庄图表可以尝试基于Dimple Charts API的http://dimplecharts.com 。 DimpleCharts已将所有dimplejs.org演示预先配置为将您的字段和数据分配给它们。 它甚至可以通过随机播放功能来生成酒窝图表，该功能可以随机播放周围的字段，因此您不必这样做。 非常干净。 您可以保存这些“图表方案”并与您的团队共享图表。