D3.js 中的子弹图刻度和标签答案

【问题标题】：Bullet chart ticks & labels in D3.jsD3.js 中的子弹图刻度和标签
【发布时间】：2013-06-13 11:40:10
【问题描述】：

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

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

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

我让前者在本地工作，并且通过将“d3.chart.bullet”替换为“d3.bullet”（并重新引用 DOM 对象和“随机化”事件监听器）。

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

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

【问题讨论】：

为什么以及如何合并这两个示例？在我看来，它们几乎完全一样。
事实上我应该研究后一个例子 (boothead.github.io/d3/ex/bullet.html) - 我所追求的是同时存在两种刻度类型（固定底部，动态向上），而不是必须按下“更改刻度”按钮。不幸的是，我无法让它在我的本地环境中工作，调用 d3.chart 总是失败。
嗯，这与您的环境（或您复制代码的方式）有关，我们不太可能为您提供帮助:)
是的，我刚刚意识到命名约定完全令人困惑，我现在已经整理出来了。得到结果后，我会在此处发布结果。

标签： d3.js label bullet-chart

【解决方案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 中的某处。至少我开始并克服了我最初的问题，所以我会接受它作为答案。

【讨论】：

谢谢，我也有同样的困惑。