D3 axes: Sometimes you want one or more of your tick lines to look different depending on their value...
Created
September 22, 2014 14:36
-
-
Save tomgp/87a5ae55152197ff28ed to your computer and use it in GitHub Desktop.
Different style for origin tick
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>scale with different styled origin</title> | |
| <style> | |
| svg{ | |
| font-family: sans-serif; | |
| } | |
| line { | |
| stroke: #eee; | |
| stroke-width:3; | |
| stroke-dasharray:3, 3; | |
| shape-rendering: crispEdges; | |
| } | |
| .origin line{ | |
| stroke: #333; | |
| } | |
| .domain{ | |
| fill:none; | |
| stroke:none; | |
| } | |
| </style> | |
| </head> | |
| <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
| <body> | |
| </body> | |
| <script type="text/javascript"> | |
| var width = 500, height= 500; | |
| var margin = 50 | |
| var scale = d3.scale.linear() | |
| .range([0, height - margin*2]) | |
| .domain([-100, 100]); | |
| var svg = d3.select('body').append('svg').attr({ | |
| width:width, | |
| height:height | |
| }).append('g').attr('transform','translate('+margin+','+margin+')'); | |
| var axis = d3.svg.axis() | |
| .scale(scale) | |
| .orient('left') | |
| .tickSize(-(width - margin*2)); | |
| svg.call(axis); | |
| svg.selectAll('.tick') | |
| .classed('origin',function(d,i){ | |
| return (d == 0); | |
| }); | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment