Question

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

E.g。这个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

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

如果这是问题，可以尝试许多不同的方法。我使用node.js运行带有express的web服务器，这是一个很好的免费解决方案。此外，下载的配置文件都在下载中，因此设置起来非常简单。

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

然后 - 如果使用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

参加聚会的时间已经很晚了，但是这可能会帮助将来想要在没有头痛的情况下获得酒窝图表体验的人...而不是经历设置网络服务器和手工编码的麻烦而你想要使用您可以尝试使用基于Dimple Charts API的http://dimplecharts.com的Dimple Charts。 DimpleCharts预先配置了所有dimplejs.org演示，以便将字段和数据分配给它们。它甚至可以通过Shuffle功能生成凹坑图表，这样就可以随机播放场景，因此您不必这样做。它非常整洁。您可以保存这些图表方案＆＃39;并与您的团队共享图表。

获取dimple.js图表

2 个答案: