if you want the ticks on top of the axis, you should use
axistop, instead of
the names are pretty easy to understand and the api is very clear:
d3.axistop(scale): in this orientation, ticks are drawn above the horizontal domain path.
d3.axisbottom(scale): in this orientation, ticks are drawn below the horizontal domain path. (emphases mine)
here is a demo, the first axis uses
axistop, and the second one, below, uses
var svg = d3.select("svg"); var x = d3.scalelinear().range([20, 280]); var xaxistop = d3.axistop(x)(svg.append("g").attr("transform", "translate(0,50)")) var xaxisbottom = d3.axisbottom(x)(svg.append("g").attr("transform", "translate(0,100)"))
<script src="https://d3js.org/d3.v4.min.js"></script> <svg></svg>
- plotting tick text above the axis
- Limit number of Y axis ticks by keeping a top tick above the bar in d3
- D3.JS trying to format the text in first tick of axis
- d3.js: Align text labels between ticks on the axis
- D3 grouped bar chart: How to rotate the text of x axis ticks?
- How to display the value for the final tick on axis in D3?
- How do I specify the number of axis tick marks in d3?
- Add extra tick of the beginning of a d3 time axis
- D3: How to remove tick marks at the top and bottom of Y axis
- D3.js - show tick values on the Y axis
- Why isn't my text displaying in the svg axis label? (D3 Margin Convention)
- Different tick sizes on the Y axis of a D3js line graph
- show the bottom most tick of y axis
- D3 align text on left side of the axis from the right most character
- How to transition D3 axis without tick text attribute reset?
- How to get the same text of each elements in heat map as the y axis label?
- d3 axis not showing tick label if two ticks have the same value
- How to color the text labels individually on an axis in d3?
- How can i set the tick text of x-axis between bar in a bar chart in c3.js or d3.js?
- Why dont the axis tick marks get removed?
- Add a space between the axis and text with NVD3 charts
- How to rotate the text labels for the x Axis of a nvd3.js line chart
- D3 align text along the right axis
- d3.js - adding One additional tick for the Y axis does not work
- How can i set the x axis tick interval to be 1 in C3 / d3 js charts?
- D3 X Axis Text and Tick Line Not Visible
- D3.js - Adding a tick value on the x axis (date format)
- Can I give the text and line elements that make up a D3 axis unique classes?
- How do I update the tick values on my axis when zooming ?
- Change the amount of tick labels on the x axis shown?
More Query from same tag
- integration of Angularjs in nvd3
- d3js v4 can't remove old data chart after update
- Draw triangle at bottom or top of line
- D3 tooltip show values from nested dataset
- csv data logs but json data doesn't?
- Why is there a last useless bin in d3js scaleTime histogram?
- How do you change the width of a Y-axis in a D3 chart?
- TypeError: Cannot read property 'push' of undefined D3?
- c3 failed to parse when using .toString()
- Is it possible to insert an SVG image into an existing SVG element already rendered on the page?
- D3: Keep mouseover Open While Mouse is Over Tooltip
- d3 map color to something other than value because colors are being duplicated when values are equal
- D3JS chart: Hovering on some transitioning elements while others are still transitioning too stops the execution of the chart animation
- Placing label in the middle of a link in d3 js tree layout
- Setting up reference lines on the x axis in D3.js
- twitter bootstrap tabs and getBBox
- How to add bootstrap dropdown lists to buttons inside list elements
- d3 create SVG path from array
- D3 v4 returning error for scaleTime when passing in Date object
- Clustering nodes to a corner instead of a circle in d3.js
- Where is this fill function defined?
- d3.js guidance on interactive scrolling an svg element
- upgrading d3js from v3 to v4 causes zoom problems
- AngularJS & D3.js: How to handle complex $watch value passing?
- Making Chart render for negative value efficiently
- d3.js axis labels not displaying in responsive bar chart
- NVD3 Discrete BarChart With Json
- How to add Label to each state in d3.js (albersUsa)?
- Still confused by d3's enter method
- Loop D3 animation of polygon vertex