tick(grid) 在 D3.js 中被 Y 轴覆盖

Question

我在这里创建了 Js fiddle Please look

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

但低于 创建 Y 轴刻度并创建刻度

我设置了 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"))

Answer 1

Select 第一个刻度线，最下面那个，把它去掉。 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"))

tick(grid) 在 D3.js 中被 Y 轴覆盖

tick(grid) is overwriting with Y Axis in D3.js

javascript

angularjs

d3.js

yaxis