子弹图表在D3.js中打勾和标签

Question

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

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).

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.

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, eg by resorting to "proper" data labels not hinging on a .ticks call? Thanks!

Answer 1

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

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

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.

EDIT: 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.