Javascript 使用本地存储数据创建条形图（绘制条形图不起作用）

我正在使用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代码：

我的全部代码：

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

---

我修复了你的代码，这是修改后的Javascript

//values uit de local storage ophalen om het vervolgens in een object te stoppen
//https://www.kirupa.com/html5/storing_and_retrieving_an_array_from_local_storage.htm
// het parsen van de local storage https://theshravan.net/blog/storing-json-objects-in-html5-local-storage/
//https://stackoverflow.com/questions/51173341/crossfilter-loading-a-json-file-from-localstorage
// stap 1 van het formulier
const huishoudenData = localStorage.getItem("huishouden");
const wonenData = localStorage.getItem("woon situatie");
const inkomenData = localStorage.getItem("inkomen");
// 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"));
console.log(localStorage.getItem("voeding"));
const voedingData = localStorage.getItem("voeding");
const overigeHuishoudelijkeUitgavenData = JSON.parse(localStorage.getItem("overige huishoudelijke uitgaven"));

// //object met alle data van de local storage 
const results = {
    // stap 1 van het formulier
    // huishouden: huishoudenData,
    // wonen: wonenData,
    // inkomen: inkomenData, 
    // stap 2 van het formulier
    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
};

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

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

  //basis regels voor de bar chart
const render = results => {
  //const yValue = results.bedrag;
  //const xValue = results.post;

  const lijstje = Object.entries(results);
  console.log(lijstje);

  //https://stackoverflow.com/questions/4437916/how-to-convert-all-elements-in-an-array-to-integer-in-javascript
  // Object.values of keys https://javascript.info/keys-values-entries
  const bedragen = Object.values(results);
  const posten = Object.keys(results);
  // const yValue = bedragen.map(Number);
  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(bedragen.map(function(key, values){results[values]}))
    .domain([0, d3.max(yValue)])
    .range([innerHeight, 0]);

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

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

};

render(results);

我必须查看您的代码库，并做一些更改以使其正常工作，但有了上述更改，您应该会很好

需要注意的几件事：

• .enter（）

  函数只接受您输入的“数组”类型的变量或数据 正在将对象传递给此方法
• 我必须更改

  height

  属性函数和

  y

  属性 函数具有数据值

---

您好，您能为您的代码编写一段代码吗？这对解决您的问题会有很大帮助。嘿，我已经在我的主要帖子中添加了代码！是的，但我没有足够的声誉这么做对不起@没关系，没问题！我现在给你投票支持这个问题！：）