项目符号图滴答声& D3.js中的标签 [英] Bullet chart ticks & labels in D3.js

问题描述

我正在尝试将以下两个官方" D3项目符号图表示例混合在一起:

I'm trying to blend the following two "official" D3 bullet chart examples into one:

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

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

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

I get the former to work locally, and I did manage to "plug" the JS code of the latter in by replacing "d3.chart.bullet" with "d3.bullet" (and re-referencing the DOM objects and "randomize" event listeners).

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

However, compatibility with the local, label-type ".ticks" call is broken that way. In an ideal world I'd like to have the equidistant ticks at the bottom, and local "data label ticks" with a slightly different styiling at the top of the bullet.

那有可能吗?我开始对此表示怀疑，因为D3次要版本似乎有所不同(均为v2.x，这很好，因为我需要nvd3兼容性).尽管如此，关于如何实现目标的任何想法，例如通过诉诸适当的"数据标签而不是在.ticks呼叫上挂起?谢谢！

Is that possible at all? I'm beginning to doubt it, as the D3 minor versions seem to differ (both v2.x, which is good since I need nvd3 compatibility). Any idea of how I could achieve my objective nevertheless, e.g. by resorting to "proper" data labels not hinging on a .ticks call? Thanks!

推荐答案

好，所以首先要解决混乱问题.在此示例中:

OK, so first for the confusion resolution. In this example:

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

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

two different libraries make the magic happen - d3.js in version 2.1, and d3.chart.js. The issue occurs when saving the entire example locally, as browsers apparently only consider the first dot in the filename for handling the extension. Hence locally, d3.chart.js becomes d3_002.js, making it appear to be a second instance of D3 v2. Moving it out leads to code failure, of course.

经验教训:始终在原始来源中查看原始命名约定.实现理想世界"解决方案后，我将更新此答案.

Lesson learned: always look at the original naming convention in the original source. I'll update this answer once I've achieved my "ideal world" solution.

仍在进行操作，密钥在d3.chart.js中的某个位置.至少我已经开始并克服了最初的问题，所以我将其作为答案.

Still working on it, the key is somewhere in the d3.chart.js. At least I got started and overcame my initial problem, so I'll accept it as an answer.

这篇关于项目符号图滴答声& D3.js中的标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！