Question

我试图制作一个条形图但是当我尝试根据我提供的数据对其进行动画处理时，我收到以下错误：

Uncaught TypeError: Cannot read property 'grootte' of undefined

我正在尝试加载csv文件，但无论我尝试什么，我都会得到错误，我无法引用数据，或者我遇到的问题是它没有将数据识别为整数。 / p>

这是相关代码：

var dataset = []

    d3.csv("/csv/test.csv", function(data) {
            dataset = data.map(function(d,i) {

              return {
                grootte: +d.grootte,
                verhuizingentilburg: d.verhuizingentilburg
              };
            });
        });

        //Here we set up the bars with a height of 0, we'll animate them later. The timeout is set for loading data

    bars = svg.selectAll("rect")
                .data(dataset)
                .enter()
                .append("rect")
                .attr("x", function(d, i){
                    return i * (width / dataset.length);
                    console.log(d[0].grootte);
                })
                .attr("y", function(d) {
                    return height - marginBottom;
                })
                .attr("width", width / dataset.length - padding)
                .attr("height", 0)
                .attr("fill", "rgb(128, 89, 183)");

 var timer = setInterval(myTimer, 1000);

    function myTimer() {

        //If the 'amount' radio button is checked, animate it like this

         if(document.getElementById('amount').checked){
            bars.data(dataset);
            bars.transition()
                .duration(1000)
                .delay(function(d, i){
                    return i * 100;
                })
                .attr("height", function(d, i) {
                  console.log(dataset[i].grootte);
                    return yscale(dataset[i].grootte);
                })
                .attr("y", function(d, i) {
                    return (height - marginBottom) - yscale(dataset[i].grootte);
                })
                .attr("fill", "rgb(193, 38, 38)");
            } 
}

以下代码出现问题：

.attr("height", function(d, i) {
              console.log(dataset[i].grootte);
                return yscale(dataset[i].grootte);

有人能帮助我吗？那真的会帮助我！

Answer 1

据我所知，d3.csv的回调函数会等到数据加载完毕。因此，不需要超时。使用超时和d3.map，我认为这种方法有点过于复杂。

我让机制工作了一些修改（我喜欢这个样子）。而不是map（），我使用forEach（）来完成任务。然后，为了避免超时功能，并且因为我喜欢d3的功能，我使用了d3选择而不是getElementById。

你没有发布整个代码，所以我不知道你的y尺度是什么（并没有包括它），或者各种参数，但关键部分可能看起来像：

car (original): My luxury car
car (returned): My luxury car
ItemArr[0] of car (original): Bag
ItemArr[1] of car (original): Pen
ItemArr[0] of car (returned): Bag
ItemArr[1] of car (returned): Pen

数据在D3中未定义

1 个答案: