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)?

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://stackoverflow.com/a/21583985/3128209