0

我是 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));

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

4

1 回答 1

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

您要求它返回anArray.date以及anArray.close何时应该返回d.date和d.close.

尝试将其更改为：

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

和

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

于 2013-09-26T14:25:38.457 回答