tickgrid被D3.js中的Y轴覆盖

编程问答 2022-06-04

问题描述

我在Please look

要求像X和Y轴下方一样，黑色和网格较浅

enter image description here

但是要达到目标

enter image description here

创建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"))

解决方法

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

<namespace/service name>:<service port>:[PROXY]:[PROXY]
angularjsjavascriptyaxis