将数据复制到javascript d3.js中的数组，然后绘制散点图答案

【问题标题】：copying data to an array in javascript d3.js and then drawing a scatterplot将数据复制到javascript d3.js中的数组，然后绘制散点图
【发布时间】：2013-09-26 14:22:01
【问题描述】：

我是 javascript 和 d3.js 的新手，并试图理解散点图。我使用了这段代码，工作正常：

//Get the data
d3.tsv("graphdata.tsv", function (error, data) {
        data.forEach(function (d) {
            d.date = parseDate(d.date);
            d.close = +d.close;
            d.open = +d.open;
        });

x.domain(d3.extent(data, function (d) { return d.date; }));
y.domain([0, d3.max(data, function (d) { return d.close; })]);

// draw the scatterplot
        svg.selectAll("dot")                                    
            .data(data)                                         
        .enter().append("circle")                               
            .attr("r", 8)                                     
            .attr("cx", function (d) { return x(d.date); })     
            .attr("cy", function (d) { return y(d.close); })    
            .style("fill", color(9));

但是当我将“data”的内容复制到“anArray”，然后尝试在anArray中绘制数据时，我得到一个空图。

//Get the data
d3.tsv("graphdata.tsv", function (error, data) {
        data.forEach(function (d) {
            d.date = parseDate(d.date);
            d.close = +d.close;
            d.open = +d.open;
        });

var anArray = new Array();
for (var i = 0; i < 26; i++)
       anArray.push(data[i]);

x.domain(d3.extent(anArray, function (d) { return anArray.date; }));
y.domain([0, d3.max(anArray, function (d) { return anArray.close; })]);

// draw the scatterplot
        svg.selectAll("dot")                                    
            .data(anArray)                                          
        .enter().append("circle")                               
            .attr("r", 8)                                     
            .attr("cx", function (d) { return x(anArray.date); })       
            .attr("cy", function (d) { return y(anArray.close); })  
            .style("fill", color(9));

我想知道为什么会这样？如果我需要做这样的事情，还有其他方法吗？

【问题讨论】：

标签： javascript arrays graph d3.js

【解决方案1】：

自从我使用d3以来已经有一段时间了，但我认为问题出在这里：

x.domain(d3.extent(anArray, function (d) { return anArray.date; }));

y.domain([0, d3.max(anArray, function (d) { return anArray.close; })]);

和

.attr("cx", function (d) { return x(anArray.date); })

.attr("cy", function (d) { return y(anArray.close); })

当它应该是 d.date 和 d.close 时，您要求它返回 anArray.date 和 anArray.close。

尝试将其更改为：

x.domain(d3.extent(anArray, function (d) { return d.date; }));

和

.attr("cx", function (d) { return x(d.date); })

【讨论】：