Last active
June 19, 2017 19:33
-
-
Save powersparks/089b0fee6ff23848962784bc58b5dbba to your computer and use it in GitHub Desktop.
Ticks on the bottom or top for axisTop orientation in v4
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
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <head> | |
| <style> | |
| body { | |
| font: 10px sans-serif; | |
| } | |
| .axis path, .axis line { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| </style> | |
| <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script> | |
| </head> | |
| <body> | |
| <div id="chart"></div> | |
| <p>An example of verticle lines extending from an x-axis using tickSizeInner and tickSizeOuter</p> | |
| </body> | |
| <script> | |
| var margin = {top: 10, right: 30, bottom: 30, left: 30}, | |
| width = 960 - margin.left - margin.right, | |
| height = 100 - margin.top - margin.bottom; | |
| var x = d3.scaleLinear() | |
| .domain([0, 25]) | |
| .range([0, width]); | |
| var y = d3.scaleLinear().domain([0,100]).range([height, 0]); | |
| var data = [1, 2, 3, 5, 8, 13, 21]; | |
| var ydata = [10, 90]; | |
| var ticksOnBottom = false; | |
| var tickSize = 8; | |
| var tickPadding = 8 | |
| var xAxis = d3.axisTop(x) | |
| //.scale(x) | |
| //.orient("top") | |
| .tickValues(data) | |
| .tickSizeInner(( ticksOnBottom ? tickSize: height - tickSize) ) | |
| .tickSizeOuter( height) | |
| .tickPadding(( ticksOnBottom ? tickPadding: -1 *(tickPadding + tickSize )) ); | |
| var yAxis = d3.axisRight(y) | |
| //.tickValues(ydata) | |
| .ticks(0) //either specify number of ticks or add values | |
| .tickSizeInner(8) | |
| .tickSizeOuter(width); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom) | |
| .append("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| svg.append("g") | |
| .attr("class", "axis axis--x") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(ticksFromXaxis); | |
| function ticksFromXaxis(g){ | |
| g.call(xAxis); | |
| var sign = ticksOnBottom ? 0 : -1; | |
| g.selectAll(".tick line").attr("y1", sign * height); //was -35, change of height 40 to 30 | |
| } | |
| svg.append("g") | |
| .attr("class", "axis axis--y") | |
| .call(yAxis); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment