1

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

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

enter image description here

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

enter image description here

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

VividD
  • 10,456
  • 6
  • 64
  • 111
marcrichter
  • 90
  • 1
  • 10
  • Why and how do you want to merge the two examples? They seem to be almost exactly the same to me. – Lars Kotthoff Jun 13 '13 at 12:38
  • In fact I should be working on the latter example (http://boothead.github.io/d3/ex/bullet.html) - what I'm after is having both tick types present at once (fixed bottom, dynmic up), rather than having to press a "change ticks" button. Unfortunately I won't get it to work in my local environment, calling d3.chart always fails. – marcrichter Jun 13 '13 at 12:58
  • Well that's something about your environment (or the way you copied the code) that we're unlikely to be able to help you with :) – Lars Kotthoff Jun 13 '13 at 13:07
  • Yes, I just realised that the naming convention is utterly confusing, I've now sorted it out. I'll post a result here once I have it. – marcrichter Jun 13 '13 at 13:38

1 Answers1

3

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.

marcrichter
  • 90
  • 1
  • 10