获取dimple.js图表

Question

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

例如，此barchart不会产生任何内容：

<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下载压缩文件并将其解压缩到本地计算机上的文件夹后，您将需要从此处的http://nodejs.org/安装node.js。

然后-如果使用的是windows -打开命令窗口，导航到解压zip文件的文件夹，然后运行以下命令：

npm install

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

node app.js

命令窗口应该看起来什么都没做，但如果你打开火狐(或任何其他浏览器)并浏览到http://localhost:3000/examples/bars_horizontal.html，这个示例就会打开，所有这些都是在你的机器上运行的。

编辑:我刚刚在这里将这段代码写入了dimple.js维基：https://github.com/PMSI-AlignAlytics/dimple/wiki#wiki-installing-the-examples

Answer 2

聚会有点晚了，但这可能会对将来想要酒窝图表体验的人有所帮助，而不是通过设置web服务器和手动编码的麻烦的headache...Instead，你可以尝试使用酒窝图表，你可以尝试http://dimplecharts.com，它是基于酒窝图表API的。DimpleCharts预先配置了所有的dimplejs.org演示程序，以便为它们分配字段和数据。它甚至可以通过Shuffle功能生成酒窝图表，该功能可以将字段打乱，这样你就不需要这样做了。它相当整洁。您可以保存这些“图表方案”，并与您的团队共享图表。