Создать гистограмму с данными локального хранилища (рисование баров не работает)

Question

Я работаю с D3. js и хочу использовать данные из моего локального хранилища. Все, кажется, хорошо, за исключением того, чтобы сделать сами бары. Я не уверен, что делаю не так.

здесь я выбираю ключи и значения локального хранилища отдельно.

const bedragen = Object.values(results);
const posten = Object.keys(results);
const yValue = bedragen;
const xValue = posten;

Затем я рисую оси Y и X.

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


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

Затем я хочу нарисовать бары, но я не вижу никакого результата. Я могу видеть оси, которые я нарисовал раньше, но без баров. Я также не вижу баров, когда я проверяю страницу.

Это код для создания баров:

  g.selectAll('.bar').data(results)
    .enter().append('rect')
        .attr('class', 'bar')
        .attr('x', d => xScale(xValue(d)))
        .attr('width', d => xScale.bandwidth())
        .attr('y', d => yScale(yValue(d)))
        .attr('height', d => innerHeight - yScale(yValue(d)));

Здесь вы можете найти весь мой код D3. js: https://github.com/ManoukK/NIBUD_datavisualisatie/blob/master/js/dataVis.js

Весь мой код:

// stap 2 van het formulier
const gasData = JSON.parse(localStorage.getItem("gas"));
const elektriciteitData = JSON.parse(localStorage.getItem("elektriciteit"));
const waterData = JSON.parse(localStorage.getItem("water"));
const lokaleLastenData = JSON.parse(localStorage.getItem("lokale lasten"));
const telefoonTVInternetData = JSON.parse(localStorage.getItem("telefoon tv internet"));
const verzekeringenData = JSON.parse(localStorage.getItem("verzekeringen"));
const onderwijsData = JSON.parse(localStorage.getItem("onderwijs"));
const kinderopvangData = JSON.parse(localStorage.getItem("kinderopvang"));
const contributiesAbonnementenData = JSON.parse(localStorage.getItem("contributies abonnementen"));
const vervoerData = JSON.parse(localStorage.getItem("vervoer"));
// stap 3 van het formulier
const kledingSchoenenData = JSON.parse(localStorage.getItem("kleding schoenen"));
const inventarisData = JSON.parse(localStorage.getItem("inventaris"));
const onderhoudHuisTuinData = JSON.parse(localStorage.getItem("onderhoud huis tuin"));
const nietVergoedeZiektekostenData = JSON.parse(localStorage.getItem("niet vergoede ziektekosten"));
const vrijetijdsuitgavenData = JSON.parse(localStorage.getItem("vrijetijdsuitgaven"));
const voedingData = JSON.parse(localStorage.getItem("voeding"));
const overigeHuishoudelijkeUitgavenData = JSON.parse(localStorage.getItem("overige huishoudelijke uitgaven"));

// //object met alle data van de local storage 
const results = {
    gas: gasData,
    elektriciteit: elektriciteitData,
    water: waterData,
    lokaleLasten: lokaleLastenData,
    telefoonTvInternet: telefoonTVInternetData,
    verzekeringen: verzekeringenData,
    onderwijs: onderwijsData,
    kinderopvang: kinderopvangData,
    contributiesAbonnementen: contributiesAbonnementenData,
    vervoer: vervoerData,
    // stap 3 van het formulier
    kledingSchoenen: kledingSchoenenData,
    inventaris: inventarisData,
    onderhoudHuisTuin: onderhoudHuisTuinData,
    nietVergoedeZiektekosten: nietVergoedeZiektekostenData,
    vrijetijdsuitgaven: vrijetijdsuitgavenData,
    voeding: voedingData,
    overigeHuishoudelijkeUitgaven: overigeHuishoudelijkeUitgavenData
};

console.log(results);

const svg = d3.select('svg');

const width = +svg.attr('width');
const height = +svg.attr('height');

const render = results => {
  const bedragen = Object.values(results);
  const posten = Object.keys(results);

  const yValue = bedragen;
  const xValue = posten;

  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');

  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('.bar')
      .data(results)
    .enter().append('rect')
        .attr('class', 'bar')
        .attr('x', function(d){return xScale(posten(d))})
        .attr('width', xScale.bandwidth())
        .attr('y', function(d) {return yScale(bedragen(d))})
        .attr('height', function(d){ return innerHeight - yScale(+d[bedragen(d)])});

};

render(results);

Answer 1

Я исправил ваш код, вот что изменилось Javascript

Мне пришлось изучить вашу кодовую базу и изменить несколько вещей, чтобы она работала, но с вышеуказанным изменением у вас все будет хорошо .

несколько замечаний:

• .enter() функция принимает только переменные или данные типа 'Array', которые вы передавали объект этому методу
• У меня было изменить функцию атрибута height и функцию атрибута y на значения данных.