d3 x 軸未顯示

Question

嗨，我正在創建一個折線圖並且我的 x 軸顯示，但是，我的 y 軸不會顯示我不知道為什么即使它遵循與我的 x 軸相同的邏輯。 如果有人可以指導我哪里出錯了，那將非常有幫助。

const yScale = d3.scaleLinear()
  .domain(d3.extent(dataset, yAccessor))
  .range([dimensions.boundedHeight,0])


const xScale = d3.scaleTime()
  .domain(d3.extent(dataset, xAccessor))
  .range([0, dimensions.boundedWidth])

// 5. Draw data

const lineGenerator = d3.line()
  .curve(d3.curveCardinal)
  .x(d => xScale(xAccessor(d)))
  .y(d => yScale(yAccessor(d)))

const line = bounds.append("path")
    .attr("d", lineGenerator(dataset))
    .attr("fill", "none")
    .attr("stroke", "#c7956d")
    .attr("stroke-width", 0.6)
    .attr("stroke-opacity", 0.8)
    .attr("fill-opacity", 0.7)

const yAxisGenerator = d3.axisLeft().tickSize(10)
  .scale(yScale)

const yAxis = bounds.append("g")
  .call(yAxisGenerator)
  .style("transform", `translateY(${
    dimensions.boundedWidth
  }px)`)
  .attr("stroke", "#7C7C7E")
  .attr("stroke-width", 1)
  .attr("stroke-opacity", 0.8)
  
const xAxisGenerator = d3.axisBottom().tickSize(10)
  .scale(xScale)

const xAxis = bounds.append("g")
  .call(xAxisGenerator)
    .style("transform", `translateY(${
      dimensions.boundedHeight
    }px)`)
    .style("stroke", "#7C7C7E")
    .style("stroke-width", 1)
    .style("stroke-opacity", 0.8)

Answer 1

看起來您正在通過寬度長度垂直平移（translateY），可能應該是高度，很可能它是在容器元素之外繪制的：

  .style("transform", `translateY(${
    dimensions.boundedWidth
  }px)`)