Получение ошибки: <rect>атрибут y: ожидаемая длина, «NaN», даже если значение является числом в D3. js - PullRequest
Новая
       21

Получение ошибки: <rect>атрибут y: ожидаемая длина, «NaN», даже если значение является числом в D3. js

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

Когда я хочу нарисовать гистограмму с d3. js из CSV-файла, я получаю ошибки:

  • Ошибка: атрибут y: ожидаемая длина, "NaN"
  • Ошибка: высота атрибута: ожидаемая длина, "NaN"

В консоли я вижу, что значения являются числами. Так почему консоль выдает ошибку?

console example

Здесь я загружаю файл 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),
              // inkomen: dataNIBUD.Inkomen
            }
        })
    })
  .then(dataNIBUD => {
    console.log(dataNIBUD)
    renderNibud(dataNIBUD);
  })
  .catch(error => {
    console.log(error)
  });

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

function renderNibud(dataNIBUD){

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

  // const database = dataNIBUD;
  const nibudPost = dataNIBUD => dataNIBUD.post;
  const nibudBedrag = dataNIBUD => dataNIBUD.bedrag;

  console.log("database van Nibud", dataNIBUD);
  console.log(nibudPost);
  console.log(nibudBedrag);

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

  const yValue = nibudBedrag;
  const xValue = nibudPost;

  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 map = d3.map(dataNIBUD, xValue);

    //per post een bar maken
    const xScale = d3.scaleBand()
      .domain(xValue)
      .range([0, innerWidth])
      .padding(0.2);

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

    const xAxisGroup = g.append('g')
      .call(d3.axisBottom(xScale))
      //X as onder zetten ipv boven
      .attr('transform', `translate(0,${innerHeight})`)
      .append('text') 
        //tekst onder de as plaatsen
        .attr('y', 35)
        //bottom tekst in het midden zetten
        .attr('x', innerWidth / 2)
        .attr('fill', 'black')
        .text('Posten');

      //de teksten onder aan rotaten 
    g.call(d3.axisBottom(xScale))
        .selectAll('.tick text')
            .attr('y', 20)
            //35 graden draaien
            .attr('transform', `rotate(35)`)
            // de anchor van de teksten staan bij start, dus onder de bar waar ze bijhoren
            .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('.barNibud')
    .data(dataNIBUD)
  .enter().append('rect')
      .attr('class', '.barNibud')
      .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)));
};
...