使用javascript的d3图形失败

我正试图使用D3JavaScript创建一个图形，但我得到一个错误.tsv无法加载资源和未捕获的TypeError:无法读取.js文件中未定义的属性“map”。 这是我的.js代码：

var svg;


var Statistics = {
//flag to determine if graph has already been generated
HaveGraph: new Array(),

//turn on or off relevan statistics details
ShowHideDetails: function (itemId) {
    var detailsId = '#' +itemId + 'Result'; //calc id of result div
    if ($(detailsId).css('display') == 'block') //if item is visible
        $(detailsId).hide();
    else {
        $(detailsId).show();

        //make ajax call to update the most recent statistics data
        var url = "/Statistics/ReGenerateStatisticFiles";
        $.get(url, 
            null, //here goes the params if we intend to pass params to function in format: { paramName: data } 
            function (data) {
                if(data == "OK") //if data was updated successfully --> show it
                 {
                    Statistics.DisplayGraph(itemId + 'Result');
                  }
                });

        }


},

//generate graph to show results
DisplayGraph: function (reportName) {
    if (Statistics.HaveGraph == null || Statistics.HaveGraph[reportName] == null) {
        svg = d3.select('#' + reportName).append("svg")
                   .attr("width", width + margin.left + margin.right)
                   .attr("height", height + margin.top + margin.bottom)
                   .append("g")
                   .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


        d3.tsv(reportName + ".tsv",
            function (d) {
                d.Count = +d.Count;
                return d;
            },
            function (error, data) {
                x.domain(data.map(function (d) { return d.Item; }));
                y.domain([0, d3.max(data, function (d) { return d.Count; })]);

                svg.append("g")
                    .attr("class", "x axis")
                    .attr("transform", "translate(0," + height + ")")
                    .call(xAxis);

                svg.append("g")
                    .attr("class", "y axis")
                    .call(yAxis)
                  .append("text")
                    .attr("transform", "rotate(-90)")
                    .attr("y", 6)
                    .attr("dy", ".71em")
                    .style("text-anchor", "end")
                    .text("Count"); //CHANGE!!!!!!!!!!

                svg.selectAll(".bar")
                    .data(data)
                  .enter().append("rect")
                    .attr("class", "bar")
                    .attr("x", function (d) { return x(d.Item); })
                    .attr("width", x.rangeBand())
                    .attr("y", function (d) { return y(d.Count); })
                    .attr("height", function (d) { return height - y(d.Count); });

            });

        Statistics.HaveGraph[reportName] = true;
    }
}
 }


 var margin = { top: 20, right: 20, bottom: 30, left: 40 },
       width = 600 - margin.left - margin.right,
       height = 400 - margin.top - margin.bottom;

    var x = d3.scale.ordinal()
        .rangeRoundBands([0, width], .1);

    var y = d3.scale.linear()
        .range([height, 0]);

    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom");

    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left")
        .ticks(10, "");

我可以看到.tsv文件获得了所需的数据，但它没有在图形上显示数据。

---

谢谢

您能分享实际的堆栈跟踪吗？嗯，您只有一个

.map

调用，这样您就知道问题出在哪里了。在其上放置一个断点，检查您在

数据中获得的值，然后从那里返回。我没有得到一个错误，该错误使我可以跟踪堆栈。网站仍在运行，但当我点击f12时，我可以看到错误