override extent for one horizon instance

Question

I have a series of horizon graphs that have been created like this:

d3.select("body")
  .selectAll(".horizon")
  .data(metrics)
  .enter()
  .append("div")
  .attr("class", "horizon")
  .attr("id", function(d){return d.toString();})
  .call(context.horizon().height(['75']));

where metrics is an array of metric objects.

I want to redefine the extent for one of those horizon objects.

I've tried calling the extent function on the one graph, but I'm not sure if I'm calling it, or even selecting it, correctly:

d3.select("#id-attribute")
  .call(context.horizon().extent(function(d,i){return([0,1000]);}));

This sort-of seems to work, but the graph display gets screwed up, with additional whitespace being added below the graph and the motion of the graph not accounting for that and leaving the top of the graph unanimated. I suspect that it's in some way due to it being a new instance of the extent object, so I tried this:

d3.select("#id-attribute")
  .call(extent(function(d,i){return([0,1000]);}));

but that generates: "ReferenceError: extent is not defined".

I've tried redefining the metric's extent function, effectively:

metrics[3].extent = function(d,i) {return([0,100]);};

but that causes the graph to be blank (although mousing over it reveals numbers in the readout), and causes its readout and the readouts of the graphs that appear below it to be blank when the mouse is not hovering over any of the graphs.

I honestly have no comprehension of how this stuff fits together, nor am I particularly experienced with JavaScript, so I'm not sure where my error lies. I'm totally out of my depth. Any tips would be greatly appreciated.

Answer 1

Do you need to redefine the extent after the initial call where the horizons are generated?

If not, try something like this:

d3.select("body")
  .selectAll(".horizon")
  .data(metrics)
  .enter()
  .append("div")
  .attr("class", "horizon")
  .attr("id", function(d){return d.toString();})
  .call(context.horizon()  
             .height(['75'])
             .extent(function(d,i){  //use this function to change extents
                   if (d.toString() == 'Whatever the name is'){
                        return [0,1000];
                   } else {
                        return [ <default min>, <default max>]
                   }
              })
 )

You can either set your own default extent, or use a function like d3.min()/d3.max() to get the value for the horizons. You just need to return an array with two elements.