javascript - D3 x axis remove vertical bars - Stack Overflow

admin管理员组

文章数量:1356294

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 ?

• javascript
• css
• d3.js
• svg

Share Improve this question Follow asked Aug 17, 2017 at 12:24 Prajakta HaliPrajakta Hali 8911 silver badge1212 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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

According 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'>

本文标签： javascriptD3 x axis remove vertical barsStack Overflow