D3 x 轴删除垂直条

Question

尝试实现 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 轴的正确方法？

Answer 1

根据D3更改文档， outerTickSize和innerTickSize已分别重命名为tickSizeInner和tickSizeOuter。

因此，更新 Gerardo Furtado 的答案，片段如下：

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

Answer 2

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

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

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

var xBar = d3.svg.axis()
    .scale(scale)
    .orient("bottom")
    .outerTickSize(0)
    .innerTickSize(0)

这是一个演示：

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)