Trying to achieve X-axis as below:
But the default implementation is as here :
The implementation looks like :
baseGroup.append("g")
.attr("class", "xaxis")
.attr("transform", "translate(5," + (height - marginBottom) + ")")
.style({ 'stroke': 'Black', 'fill': 'none', 'stroke-width': '0.5px','font-size': '14px', 'shape-rendering': 'crispEdges'})
.call(xBar);
Want to remove vertical bars on each tick. Can anyone suggest me the right way to style D3 x axis ?
Trying to achieve X-axis as below:
But the default implementation is as here :
The implementation looks like :
baseGroup.append("g")
.attr("class", "xaxis")
.attr("transform", "translate(5," + (height - marginBottom) + ")")
.style({ 'stroke': 'Black', 'fill': 'none', 'stroke-width': '0.5px','font-size': '14px', 'shape-rendering': 'crispEdges'})
.call(xBar);
Want to remove vertical bars on each tick. Can anyone suggest me the right way to style D3 x axis ?
Share Improve this question asked Aug 17, 2017 at 12:24 Prajakta HaliPrajakta Hali 891 silver badge12 bronze badges 3-
Since you are passing an object to
style
I assume you are using D3 v3, is that correct? – Gerardo Furtado Commented Aug 17, 2017 at 12:29 - Yes, version 3.5.17 – Prajakta Hali Commented Aug 17, 2017 at 12:41
- You can try for this css too:- .xaxis line { stroke-opacity: 0 } – Aravind Cheekkallur Commented Aug 17, 2017 at 12:56
3 Answers
Reset to default 6According to D3 changes documentation the outerTickSize and innerTickSize have been renamed to tickSizeInner and tickSizeOuter respectively.
Therefore, updating Gerardo Furtado answer, the snippet would be:
var xBar = d3.svg.axis()
.scale(scale)
.orient("bottom")
.tickSizeOuter(0)
.tickSizeInner(0)
For setting the size of the inner ticks, you have to use axis.innerTickSize
. According to the API:
If size is specified, sets the inner tick size to the specified value and returns the axis. If size is not specified, returns the current inner tick size, which defaults to 6.
Therefore, in your case, the axis generator should be like this:
var xBar = d3.svg.axis()
.scale(scale)
.orient("bottom")
.outerTickSize(0)
.innerTickSize(0)
Here is a demo:
var svg = d3.select("svg");
var scale = d3.scale.linear()
.domain([0, 100])
.range([20, 480]);
var axis = d3.svg.axis()
.scale(scale)
.orient("bottom")
.outerTickSize(0)
.innerTickSize(0)
.tickPadding(10);
svg.append("g")
.attr("class", "x axis")
.style({
'stroke': 'gray',
'fill': 'none',
'stroke-width': '1px',
'font-size': '14px',
'shape-rendering': 'crispEdges'
})
.attr("transform", "translate(0,50)")
.call(axis)
<script src="https://d3js/d3.v3.min.js"></script>
<svg width="500" height="100"></svg>
It can be achieve through css properties. Reduce stroke-opacity of the axis tick line to 0
var svg = d3.select("svg");
var scale = d3.scale.linear()
.domain([0, 100])
.range([20, 480]);
var axis = d3.svg.axis()
.scale(scale)
.orient("bottom")
.tickPadding(10);
svg.append("g")
.attr("class", "x axis")
.style({
'stroke': 'gray',
'fill': 'none',
'stroke-width': '1px',
'font-size': '14px',
'shape-rendering': 'crispEdges'
})
.attr("transform", "translate(0,50)")
.call(axis);
.x.axis>.tick> line {
stroke-opacity: 0;
}
<script src="https://d3js/d3.v3.min.js"></script>
<svg width='500' height='200'>