d3.js selection and call() conundrum

Question

i have the following bit of d3 (cubism) code in a coffeescript class:

d3.select("view").selectAll(".horizon")
    .data( @metrics )
  .enter()
    .insert("div", ".bottom")
    .attr("class", "horizon")
  .call( @ctx.horizon() )

and everything works great. however, i would like to pass the following data structure into my class to instantiate the 'view':

metricGroup =
  cpu:
    extent: [0,100]
  temperature:
    extent: [0,80]
  power:
    scale: d3.scale.ordinal( [0,1,2] ).range( [-2,1,-1] )
    extent: [-2,1]

as you can see, i wish to associate certain scale and extents to each metric. each metric (would) define specific calls to each horizon object that needs to be chained in the above d3 code such that:

.call( 
  @ctx.horizon()
    .scale(@metricGroup.power.scale)
    .extent(@metricGroup.power.extent) 
)

so for the 'power' metric, it would be

.call(
  @ctx.horizon()
    .scale(d3.scale.ordinal( [0,1,2] ).range( [-2,1,-1] ))
    .extent( [-2,1] )
)

how could i keep the elegance of the select/enter/call method chain, yet provide the customisation i want?

Have you tried making the scales etc part of the data you pass in? — Lars Kotthoff, May 11 '13 at 20:05

score 0 · Answer 1 · answered May 12 '13 at 05:01

I'm a bit constrained here because I'm only somewhat familiar with cubism, and I can't stand coffeescript :). But it looks like you probably want to define functions for your horizon properties, as per the "array of languages" example here (scroll up one paragraph). I don't know what @metrics is in your code, but if you used an array of key names, e.g. ["cpu", "temperature", ...] you could do the lookup in the functions, e.g. (sorry, switching to js):

.call(
    ctx.horizon()
       .scale(function(d) { return metricGroup[d].scale || defaultScale; })
       // etc
)

d3.js selection and call() conundrum

1 Answers1