Не могу нарисовать бары и оси в D3. js с локальным CSV-файлом - PullRequest
Новая
       21

Не могу нарисовать бары и оси в D3. js с локальным CSV-файлом

0 голосов
/ 16 января 2020

Я хочу загрузить CSV, с данными в нем я хочу нарисовать гистограмму с d3. js. Но я не могу нарисовать бары, и это не показывает оси. Кто-нибудь знает, что пошло не так (и где), я не могу понять это. Я использовал этот код раньше, и он работал отлично.

Здесь я загружаю CSV 

const dataNIBUD = d3.csv('/data/begrotingNIBUD2.csv')
      .then(dataNIBUD => {
          console.log(dataNIBUD)
                return dataNIBUD.map(dataNIBUD => {
                return {
                  post: dataNIBUD.post,
                  bedrag: Number(dataNIBUD.bedrag),
                }
            })
        })
      .then(dataNIBUD => {
        console.log(dataNIBUD)
        renderNibud(dataNIBUD);
      })
      .catch(error => {
        console.log(error)
      });

Здесь я рисую гистограмму 

function renderNibud(dataNIBUD){

  const svg = d3.select(".nibud");

  // + zet stings om in nummers
  const width = +svg.attr('width');
  const height = +svg.attr('height');

    const yValue = dataNIBUD => dataNIBUD.bedrag;
    const xValue = dataNIBUD => dataNIBUD.post;

    const margin = {top: 50, right: 100, bottom: 50, left: 100};
    const innerWidth = width - margin.left - margin.right;
    const innerHeight = height - margin.top - margin.bottom;

    const yScale = d3.scaleLinear()
      .domain([0, d3.max(yValue)])
      .range([innerHeight, 0]);

    const xScale = d3.scaleBand()
      .domain(xValue)
      .range([0, innerWidth])
      .padding(0.2);

    const g = svg.append('g')
      .attr('transform', `translate(${margin.left},${margin.top})`);

    const xAxisGroup = g.append('g')
      .call(d3.axisBottom(xScale))
      .attr('transform', `translate(0,${innerHeight})`)
      .append('text') 
        .attr('y', 35)
        .attr('x', innerWidth / 2)
          .attr('fill', 'black')
        .text('Posten');

    g.call(d3.axisBottom(xScale))
        .selectAll('.tick text')
            .attr('y', 20)
            .attr('transform', `rotate(35)`)
            .style('text-anchor', 'start');

    const yAxisGroup = g.append('g')
      .call(d3.axisLeft(yScale))
      .append('text')
        .attr('x', -120)
        .attr('y', -60)
        .attr('fill', 'black')
        .text('Geld in euros')
        .attr('transform', `rotate(-90)`);

  g.selectAll('.nibud')
    .data(dataNIBUD)
  .enter().append('rect')
      .attr('class', '.nibud')
      .attr('x', function(d){ return xScale(d)})
      .attr('width', xScale.bandwidth())
      //zonder d hier word alles op zn kop gezet
      .attr('y', d => yScale(yValue(d)))
      .attr('height', d => innerHeight - yScale(yValue(d)));
};

renderNibud(dataNIBUD);
...