3

In Rickshaw, I want to color one specific Y-axis grid-line different than the other Y-axis grid-lines when using a Rickshaw.Graph.Axis.Y.Scaled axis. I can do this with jQuery ( specifically 32° is the line I care about):

$('#container_id * svg * g[data-y-value=32] > line')
  .css('stroke','rgb(255,0,0)')
  .css('stroke-width','2')

Is there an idiomatic, better, or safer way of coloring a specific line grid-line?

Ross Rogers
  • 23,523
  • 27
  • 108
  • 164

1 Answers1

1

Well I have something more idiomatic where I'm monkey patching the renderer and using D3 selectors:

var y_grid = new Rickshaw.Graph.Axis.Y.Scaled({
  graph: graph,
  tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
  tickValues: y_tick_vals,
  scale: scale
});
// Begin monkey business
var old_render = y_grid.render
y_grid.render = function() {
  old_render.apply(y_grid,arguments)
  y_grid.graph.vis.select('svg .y_grid g[data-y-value="32"] line')
    .style('stroke','rgb(255,0,0)')
    .style('stroke-width','1')
}
Ross Rogers
  • 23,523
  • 27
  • 108
  • 164