NVD3.js:文档在哪里?需要帮助来配置一些功能

时间:2013-06-14 12:46:02

标签: nvd3.js

我开始使用NVD3.js,我对这个工具可能的配置有点迷茫。 我想配置许多项目,如:

  • 显示每个条形的x轴标签,目前我只有偶数显示: My currently chart
  • 我想在条形图上配置一个点击功能,它会重定向到一个传递x轴作为参数的页面,这个链接可以显示在标签上,但在这种情况下我需要更改它,以便能够点击它。

这些是我的疑惑,有人可以通过文档链接我的问题的答案帮助我吗?

- 编辑 -

找到如何在x轴上显示每个条形的标签:

在nv.d3.js中编辑函数nv.models.multiBarChart。在此行中reduceXTicks = true,将值设置为false

只需将此行添加到nv.addGraph函数中:

chart.reduceXTicks('false');

5 个答案:

答案 0 :(得分:11)

NVD3的开发似乎已转移到nvd3-community forkdocumentation可用。

答案 1 :(得分:4)

同意shabeer90。 NVD3没有文档(希望有)。 D3.js文档当然主要在起作用......

答案 2 :(得分:3)

感谢所有回复,但我自己做了:

用于显示每个条形的x轴标签:

chart.reduceXTicks('false');添加到nv.addGraph()功能中,如下所示:

nv.addGraph(function () {
    var chart = nv.models.multiBarChart();

    chart.reduceXTicks(false);

    return chart;
});

要添加事件以点击条形图,请在图表功能中使用此功能:

d3.selectAll("rect.nv-bar").on("click", function (d) { // You can pass d to function to recover x ou y value of the bar
  // Whatever you want to do on click
});

如果有人有更好的解决方案,请在此处发表评论。

答案 3 :(得分:2)

虽然不是理想的解决方案,但我发现通过使用下面的链接找到可用的配置选项并在右边修改参数直到得到我想要的结果更容易。它适用于nvd3的angularjs包装器,但配置几乎相同,只能通过JSON。

https://krispo.github.io/angular-nvd3/#/historicalBarChart

答案 4 :(得分:1)

这里有API的文档。在有人提供简单摄取JSON的抽象之前,这些工具都不会有用。没有人想编写一个该死的图表。

https://github.com/novus/nvd3/wiki/API-Documentation