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)?
Asked
Active
Viewed 1.1k times
12
-
Yes, you can do that with [`.tickValues()`](https://github.com/mbostock/d3/wiki/SVG-Axes#wiki-tickValues). – Lars Kotthoff Feb 21 '14 at 16:24
-
@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 http://www.performance-ideas.com/wp-content/uploads/2011/03/bubble_quad.png – Gthiet Feb 21 '14 at 18:45
1 Answers
24
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
