d3.js - D3.js 中的子弹图刻度和标签

Question

我正在尝试将以下两个“官方”D3 子弹图示例融合为一个：

http://bl.ocks.org/mbostock/4061961

http://boothead.github.io/d3/ex/bullet.html

我让前者在本地工作，我确实设法通过用“d3.bullet”替换“d3.chart.bullet”来“插入”后者的JS代码（并重新引用DOM对象和“随机化”事件监听器）。

但是，这种方式破坏了与本地标签类型“.ticks”调用的兼容性。在一个理想的世界中，我希望在底部有等距的刻度，在项目符号的顶部有一个稍微不同的样式的本地“数据标签刻度”。

这有可能吗？我开始怀疑它，因为 D3 次要版本似乎有所不同（都是 v2.x，这很好，因为我需要 nvd3 兼容性）。尽管如此，我如何实现我的目标的任何想法，例如通过使用不依赖于 .ticks 调用的“正确”数据标签？谢谢！

Answer 1

好的，首先是混淆解决方案。在这个例子中：

http://boothead.github.io/d3/ex/bullet.html

两个不同的库使奇迹发生 - 2.1 版中的 d3.js 和 d3.chart.js。在本地保存整个示例时会出现问题，因为浏览器显然只考虑文件名中的第一个点来处理扩展名。因此，在本地，d3.chart.js 变为 d3_002.js，使其看起来是 D3 v2 的第二个实例。当然，将其移出会导致代码失败。

经验教训：始终查看原始源代码中的原始命名约定。实现“理想世界”解决方案后，我将更新此答案。

编辑：仍在努力，关键在 d3.chart.js 中的某个地方。至少我开始并克服了我最初的问题，所以我会接受它作为答案。