d3-带有对数刻度的y轴-刻度线重叠

Question

我正在尝试对折线图的y轴使用对数刻度。 这是我的代码：

 var yScale_for_axis = d3.scaleLog().domain([1,d3.max(vals)]).range ([height,0]);


 g.append("g")
      .call(d3.axisLeft(yScale_for_axis).tickFormat( d3.format(".1e"));

刻度线相互重叠。这是它的外观：

如何使它看起来像这样？

Answer 1

看一下代码片段-似乎可行。也许是刻度线格式使刻度线重叠：

const width = 400, height = 500;

 // Append SVG 
 const svg = d3.select("body")
                .append("svg")
                .attr("width", width)
                .attr("height", height);

// Create scale
const scale = d3.scaleLog()
                  .domain([1, 5000])
                  .range([20, height - 20]);

// Add scales to axis
const yAxis = d3.axisLeft()
                   .scale(scale);

    //Append group and insert axis
svg.append("g")
  .attr('transform', 'translate(150, 0)')
  .call(yAxis);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>