D3.js Specific Tick Styling

Question

Is there a way to style a specific tick say if I was using x [0, 100] and y [0,100] and I wanted to just draw or style the tick for (0,50) and (50,0)?

Fain

Yes, you can do that with .tickValues(). – Komatik

@LarsKotthoff I'm talking about making the grid line dark/wider at (0,50) and (50,0) I've tried working with the css stroke attribute for axis but it doesn't seem to work...I'm basically trying to render a graph with 4 quads, where (0,50) and (50,0) are the darker grid lines.... similar to this performance-ideas.com/wp-content/uploads/2011/03/… – Fain

Answer 1

Ticks created by the d3 axis functions have the tick value bound to it as a data object. After you draw an axis, you can re-select the ticks and manipulate them based on their data.

For example, you can filter the selection to only find the ticks with a specific value. Then you can apply styles or classes the same as for any other d3 selection.

d3.selectAll('g.tick')
  .filter(function(d){ return d==50;} )
   //only ticks that returned true for the filter will be included
   //in the rest of the method calls:
  .select('line') //grab the tick line
  .attr('class', 'quadrantBorder') //style with a custom class and CSS
  .style('stroke-width', 5); //or style directly with attributes or inline styles

More explanation and another example, using a data-based function in the attribute call instead of using a filter:
https://mcmap.net/q/695304/-custom-tick-size-on-axis-d3js

Canuck