Question

我正在做一个练习，使用鲍勃·罗斯（Bob Ross）节目的季节（X 轴）的颜色数量（Y 轴）的 D3 来显示折线图。我不明白为什么我的折线图上的 Y 轴显示不正确。至少，那是我怀疑错误所在的地方。如您所见，我正在转换将 Y 值保存在 yAccessor 变量中并将其传递给 d3.scaleLinear 函数。问题是它没有将值识别为整数吗？

dateutil

<!DOCTYPE html>
<html lang="en">

  <head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>D3 exercise</title>
  </head>

  <body>
  <div id='wrapper'></div>

  <script src="https://d3js.org/d3.v6.min.js"></script>
  <script>
      async function drawLineChart() {
          const data = await d3.csv('https://raw.githubusercontent.com/jwilber/Bob_Ross_Paintings/master/data/bob_ross_paintings.csv')
          //console.log(data)

          const yAccessor = d => parseInt(d['num_colors'])
          //console.log(yAccessor(data[0]))

          const xAccessor = d => d['season']
          //console.log(xAccessor(data[0]))

          let dimensions = {
              width: window.innerWidth * 0.9,
              height: 400,
              margin: {
                  top: 15,
                  right: 15,
                  bottom: 40,
                  left: 60,
              }
          }

          dimensions.boundedWidth = dimensions.width -
              dimensions.margin.left -
              dimensions.margin.right

          dimensions.boundedHeight = dimensions.height -
              dimensions.margin.top -
              dimensions.margin.bottom

          const wrapper = d3.select('#wrapper')
              .append('svg')
              .attr('width', dimensions.width)
              .attr('height', dimensions.height)

          const bounds = wrapper.append('g')
              .style('transform', `translate(${
                  dimensions.margin.left
              }px, ${
                  dimensions.margin.top
              }px)`)

          const yScale = d3.scaleLinear()
              .domain(d3.extent(data, yAccessor))
              .range([dimensions.boundedHeight, 0])
          //console.log(yScale(10))

          episodes = []

          function episodeCounter() {
              for (const [key, value] of Object.entries(data)) {
                  episodes.push(data[key].season)
              }
          }

          episodeCounter()

          const distinctEpisodes = [...new Set(episodes)]
          //console.log(distinctEpisodes)

          const xScale = d3.scaleOrdinal()
              .domain(distinctEpisodes)
              .range([0, dimensions.boundedWidth])

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

          const line = bounds.append('path')
              .attr('d', lineGenerator(data))
              .attr('fill', 'none')
              .attr('stroke', '#af9358')
              .attr('stroke-width', 2)

          // const xAxisGenerator = d3.axisBottom()
          //     .scale(xScale)

          // const xAxis = bounds.append('g')
          //     .call(xAxisGenerator)
          //     .style('transform', `translateY(${
          //         dimensions.boundedHeight
          //     }px)`)
      }

      drawLineChart()
  </script>
</html>

D3 折线图显示不正确

0 个答案: