Question

我花了几个小时试图解决这个问题。我正在尝试将一些mailchimp数据加载到d3中并对其进行处理。只是简单的报告信息。

在Firefox上，我收到此错误：TypeError：a未定义在Chrome上，出现以下错误：Uncaught TypeError：无法读取未定义的属性“ length”

我很茫然。有帮助吗？

我得到了以下代码：

var data; 
    d3.csv("data/campaigns.csv", function(d) {
        return {
            title: d.Title,
            Subject: d.Subject,
            List: d.List,
            SendDate: new Date(d.SendDate),
            TotalRecipients: +d.TotalRecipients,
            SuccessfulDeliveries: +d.SuccessfulDeliveries,
            SoftBounces: +d.SoftBounces,
            HardBounces: +d.HardBounces,
            TotalBounces: +d.TotalBounces,
            TimesForwarded: +d.TimesForwarded,
            ForwardedOpens: +d.ForwardedOpens,
            UniqueOpens: +d.UniqueOpens,
            OpenRate: parseFloat(d.OpenRate),
            TotalOpens: +d.TotalOpens,
            UniqueClicks: +d.UniqueClicks,
            ClickRate: parseFloat(d.ClickRate),
            TotalClicks: +d.TotalClicks,
            Unsubscribes: +d.Unsubscribes,
            AbuseComplaints: +d.AbuseComplaints
        }
    }).then(function(d) {
        data = d;
        console.log(d);
    });
  var datemin = new Date("September 12, 2013");
    var datemax = new Date();

    // X Scale
    var xScale = d3.scaleTime()
        .domain([datemax, datemin])
        .range([width, 0]);
    // Y Scale
    var yScale = d3.scaleLinear()
        .domain([0, 7000])
        .range([height, 0]);

    // Tooltip div
    d3.select('#content').append('div')
        .attr('class', 'tooltip')
        .style('opacity', 0);
    // SVG
    var svg = d3.select('#content') 
        .append('svg')
            .attr('class', 'mainsvg')
            .attr('width', width + margin.left + margin.right)
            .attr('height', height + margin.top + margin.bottom)
        .append('g')
            .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

    // Append x and y axis
    svg.append('g')
        .attr('class', 'x axis')
        .attr('transform', 'translate(0,' + height + ')')
        .call(d3.axisBottom(xScale))
    svg.append('g')
        .attr('class', 'y axis')
        .call(d3.axisLeft(yScale))

    // Line
    var line = d3.line()
        .x(function(d) { return xScale( new Date(d.SendDate) ); })
        .y(function(d) { return yScale( +d.UniqueOpens ); });

    svg.append('path')
        .datum(data)
        .attr('class', 'line')
        .attr('d', line);

}

Answer 1

由于d3.csv是异步的，因此看起来d3可能在调用完成并提供所述数据之前尝试使用其提供的数据。

我怀疑如果将代码放在另一个then块中，则您的代码将起作用，因此它仅在将数据绑定到data之后运行。

例如，代替：

    }).then(function(d) {
        data = d;
        console.log(d);
    });
    // The rest of your code here

您会这样做：

    }).then(function(d) {
        data = d;
        console.log(d);
    })
    .then(function() {
      // The rest of your code here.
    })

d3 TypeError：a未定义

1 个答案: