滴答（网格）在 D3.js 中被 Y 轴覆盖答案

【问题标题】：tick(grid) is overwriting with Y Axis in D3.js滴答（网格）在 D3.js 中被 Y 轴覆盖
【发布时间】：2021-02-17 11:08:31
【问题描述】：

我在这里创建了 Js fiddle Please look

需要像下面的 X 和 Y 轴，黑色和网格更亮

但低于 创建 YAxis 刻度并创建刻度

我设置了 tickSizeInner(margin-width+100) 但它不起作用

    var yScaleTest = d3.scaleLinear()
  .domain([
    d3.min(this.materialGraphDataSource[0].materials, function (d) {
      return d3.min(d.materialStocks, function (d) {
        return d.item2;
      })
    }),
    d3.max(this.materialGraphDataSource[0].materials, function (d) {
      return d3.max(d.materialStocks, function (d) {
        return d.item2;
      })
    })])
  .range([height - margin, 0])
  .nice();

   /* Add Axis into SVG */
var xAxis = d3.axisBottom(xScaleTest)
  .ticks(d3.timeMonth.every(1))
  .tickSizeOuter(0)
  .tickSizeInner(-height + margin)
  .tickFormat(d3.timeFormat("%b -%Y"));

var yAxis = d3.axisLeft(yScaleTest)
 .ticks(14)
  .tickSizeOuter(0)
  .tickSizeInner(margin-width+200)

svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)
    .call(g => g.selectAll(".tick line")
      .attr("class", "axis_bar")
      .attr("stroke", "#E8E8E8"))

【问题讨论】：

标签： javascript angularjs d3.js yaxis

【解决方案1】：

选择第一个刻度线，底部的那个，然后将其删除。 JSFiddle

  svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)
    .call(g => g.select('.tick:first-of-type line').remove())
    .call(g => g.selectAll(".tick line")
      .attr("class", "axis_bar")
      .attr("stroke", "#E8E8E8"))

【讨论】：

@@Hugo Elhaj-Lahsen - 不，它会在 Y 轴上改变颜色。但是这里 yAxis 刻度在 X Axis 上被覆盖了。请你看看我附加的 JSFiddle 在这里
我误解了这个问题。我已经更改了答案以反映这一点。
@@hugo-elhaj-lahsen。它已修复，谢谢。添加 .call(g => g.select('.tick:first-of-type line').remove()) 并修复。非常感谢