D3 x 轴去除竖线答案

【问题标题】：D3 x axis remove vertical barsD3 x 轴去除竖线
【发布时间】：2019-01-03 18:42:39
【问题描述】：

尝试实现X轴如下：

但默认实现如下：

实现看起来像：

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);

想要删除每个刻度上的垂直条。谁能建议我设置 D3 x 轴样式的正确方法？

【问题讨论】：

既然您将对象传递给style，我假设您使用的是 D3 v3，对吗？
是的，版本 3.5.17
你也可以试试这个css：- .xaxis line { stroke-opacity: 0 }

标签： javascript css d3.js svg

【解决方案1】：

根据D3 changes documentation，outerTickSize 和 innerTickSize 已分别重命名为 tickSizeInner 和 tickSizeOuter。

因此，更新 Gerardo Furtado 的答案，sn-p 将是：

var xBar = d3.svg.axis()
  .scale(scale)
  .orient("bottom")
  .tickSizeOuter(0)
  .tickSizeInner(0)

【讨论】：

【解决方案2】：

要设置内部刻度的大小，您必须使用axis.innerTickSize。根据API：

如果指定了大小，则将内部刻度大小设置为指定值并返回轴。如果未指定 size，则返回当前的内部刻度大小，默认为 6。

因此，在您的情况下，轴生成器应该是这样的：

var xBar = d3.svg.axis()
    .scale(scale)
    .orient("bottom")
    .outerTickSize(0)
    .innerTickSize(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")
  .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.org/d3.v3.min.js"></script>
<svg width="500" height="100"></svg>

【讨论】：

【解决方案3】：

可以通过css属性来实现。将轴刻度线的stroke-opacity 减少到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.org/d3.v3.min.js"></script>
<svg width='500' height='200'>

【讨论】：