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
- Uncaught SyntaxError: Unexpected token ILLEGAL when running graph
- how to sort dates in jquery
- D3 js tooltip violin plot
- nvd3 - can't showXAxis(false) if xAxis is visible
- TCPDF draws <defs> tags
- d3 histogram and barchart data
- D3.js and Knockout Force Diagram API Updates
- How to get identical colors for categories between different plots in Dimple
- Storing values for resuse while operating on a selection
- How to not interrupt a mouseover d3 transition on mouseout?
- Copy and Insert in d3 selection
- How to position nodes Force Directed Graph D3 with CSS?
- With D3, how can I set attribute ("fill", "none") of axis path and line, but not text (without editing stylesheet)
- How to use crossfilter.js for adding data to a reusable scatterplot?
- Is it possible to determine if a GeoJSON point is inside a GeoJSON polygon using JavasScript?
- Error parsing d3 line chart 2d data
- Different d3 versions causing dependency issues when used within Shiny app
- d3.js - ordering two series by values of one of them
- Why isn't month shown on my X Axis?
- user-scalable=no but still able to scale entire page on web map application?
- d3 - help required in node
- How to add labels to c3.js scatter plot graph?
- Modify Existing d3 code - dynamic rectangle height to match text
- nvd3 repeating months on x-axis
- D3 transition works unexpectedly
- Selecting only a subset in d3.select
- D3 Map not showing despite having it on my web server
- Filtering array in d3