Question

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

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

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

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

1 个答案: