如何使用d3.js將條形圖的條形放置在xAxis的正確位置？-有解無憂

我正在制作條形圖，但在將條形位置與 xAxis 匹配時遇到問題。它們不在正確的位置，例如，將條形懸停在 2010 年標記上方，您可以看到它顯示了 2007 年的值。我該如何解決？

 let url = "https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json";

const padding = 50;
const height = 460;
const width = 940;
const barthickness = 2.909090909090909;

 var svg = d3.select('body')
    .append('svg')
    .attr('width', width)
    .attr('height', height);

var arr = [];
var years = [];

d3.json(url, function(data) {
        for (let i = 0; i < data.data.length; i  ) {
            arr[i] = data.data[i];
            years[i] = parseInt(data.data[i][0].slice(0,4));
        }  

     const yScale = d3.scaleLinear()
                      .domain([0, d3.max(arr, (d) => d[1])])
                      .range([height - padding, padding]);

    const xScale = d3.scaleLinear()
                       .domain([d3.min(years, d => d), d3.max(years, (d) => d)])
                       .range([padding, width - padding]);

const xAxis = d3.axisBottom(xScale);

const yAxis = d3.axisLeft(yScale);

    svg.append("g")
       .attr("transform", "translate(0,"   (height - padding)   ")")
       .call(xAxis);

   svg.append('g')
      .attr('transform', 'translate('   padding   ', 0)')
      .call(yAxis)

    svg.selectAll('rect')
        .data(arr)
        .enter()
        .append('rect')
        .attr('fill', 'blue')
        .attr('height', d => height - padding - yScale(d[1]))
        .attr('width', barthickness)
        .attr('x', (d, i) => padding   (3.2* i))
        .attr('y', d => yScale(d[1]))
        .append('title')
        .text((d, i) => years[i]   ': '   d[1])
    });

        <script src="https://d3js.org/d3.v4.min.js"></script>

uj5u.com熱心網友回復：

問題是您沒有使用 x 比例來定位條形圖。您padding (3.2* i)用于設定條形的 x 坐標，該坐標與您的比例不一致。您的圖表寬 840 像素，有 275 個條，每條約為 3.055 像素。您的代碼每 3.2 像素放置一個條形，這太遠了。

通常對于條形圖，而不是硬編碼條形粗細，您使用帶刻度。您將需要在軸上使用比例尺并定位條形。

或者，由于您正在處理時態資料，您還可以考慮使用面積圖而不是條形圖。

下面我為您的資料提供了兩個外觀相似的圖表。一個是條形圖，另一個是面積圖。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <script src="https://d3js.org/d3.v7.js"></script>
</head>

<body>
  <div id="bar-chart"></div>
  <div id="area-chart"></div>

  <script>
    const url = 'https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json';

    d3.json(url).then(json => {
      // convert the string into Date objects
      const parse = d3.timeParse('%Y-%m-%d');
      const data = json.data.map(d => ({ date: parse(d[0]), value: d[1] }));

      barchart(data);
      areachart(data);
    });

    function barchart(data) {
      // set up

      const margin = { top: 20, right: 20, bottom: 20, left: 30 };

      const width = 600 - margin.left - margin.right;
      const height = 300 - margin.top - margin.bottom;

      const svg = d3.select('#bar-chart')
        .append('svg')
          .attr('width', width   margin.left   margin.right)
          .attr('height', height   margin.top   margin.bottom)
        .append('g')
          .attr('transform', `translate(${margin.left},${margin.top})`);

      // scales

      const x = d3.scaleBand()
          .domain(data.map(d => d.date))
          .range([0, width]);

      const y = d3.scaleLinear()
          .domain([0, d3.max(data, d => d.value)])
          .range([height, 0]);

      // axes

      // by default, axes for band scales show tick marks for every bar
      // that would be too cluttered for this data, so we override this
      // by explicitly setting tickValues()
      const [minDate, maxDate] = d3.extent(data, d => d.date);
      const xAxis = d3.axisBottom(x)
          .tickSizeOuter(0)
          // only show the year in the tick labels
          .tickFormat(d3.timeFormat('%Y'))
          .tickValues(d3.timeTicks(minDate, maxDate, 10));

      const yAxis = d3.axisLeft(y)
          .tickSizeOuter(0)
          .ticks(10, '~s');

      svg.append('g')
          .attr('transform', `translate(0,${height})`)
          .call(xAxis);

      svg.append('g')
          .call(yAxis);

      // bars

      // function to convert Date into string showing the month and year
      const format = d3.timeFormat('%b %Y');

      svg.selectAll('rect')
        .data(data)
        .join('rect')
          .attr('x', d => x(d.date))
          .attr('width', d => x.bandwidth())
          .attr('y', d => y(d.value))
          .attr('height', d => height - y(d.value))
          .attr('fill', 'steelblue')
        .append('title')
          .text(d => `${format(d.date)}: ${d.value}`)
    }

    function areachart(data) {
      // set up

      const margin = { top: 20, right: 20, bottom: 20, left: 30 };

      const width = 600 - margin.left - margin.right;
      const height = 300 - margin.top - margin.bottom;

      const svg = d3.select('#area-chart')
        .append('svg')
          .attr('width', width   margin.left   margin.right)
          .attr('height', height   margin.top   margin.bottom)
        .append('g')
          .attr('transform', `translate(${margin.left},${margin.top})`);

      // scales

      const x = d3.scaleTime()
          .domain(d3.extent(data, d => d.date))
          .range([0, width]);

      const y = d3.scaleLinear()
          .domain([0, d3.max(data, d => d.value)])
          .range([height, 0]);

      // area generator

      const area = d3.area()
          .x(d => x(d.date))
          .y0(y(0))
          .y1(d => y(d.value))
          .curve(d3.curveStepAfter);

      // axes
      const xAxis = d3.axisBottom(x)
          .tickSizeOuter(0)
          // only show the year in the tick labels
          .tickFormat(d3.timeFormat('%Y'));

      const yAxis = d3.axisLeft(y)
          .tickSizeOuter(0)
          .ticks(10, '~s');

      svg.append('g')
          .attr('transform', `translate(0,${height})`)
          .call(xAxis);

      svg.append('g')
          .call(yAxis);

      // area

      svg.append('path')
          .attr('d', area(data))
          .attr('fill', 'steelblue')
    }

  </script>
</body>

</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/401969.html

標籤：javascript json d3.js 数据集条形图

上一篇：d3.jsy軸未正確顯示月份

下一篇：如何使用d3js設定比例？