Question

我有一个包含大量值的.csv文件，它将充当x＆amp; y轴。
A，B 1,2 3,4 5,6等

现在我有另一个.csv文件，它有一些“数据”值用于相应的a＆amp;湾我想根据“数据”值下降的范围创建具有不同颜色的散点图。自从＆amp; b是固定的，“数据”可以改变我希望两者都有单独的文件。

我试过这样的事情：

var mycolor=["#00008F","#00009F","#0000AF","#0000BF","#0000CF",
                        "#0000DF","#0000EF","#0000FF","#000FFF","#001FFF",
                        "#002FFF","#003FFF","#004FFF","#005FFF","#006FFF",];           
d3.csv("file1.csv",function(d1)
            {
                var i;
                var mydata1=d1;

svg.selectAll(".circle").attr("class", "bubble").data(mydata1).enter().append("circle")
                .attr("cx", function(d){ return scaleX(d.a);})
                .attr("cy", function(d){return scaleY(d.b);})
                .attr({
                        "r": 3,
                        "fill-opacity": 0.1,
                        })
                .style("fill", function(d)
                        {    d3.csv("file2.csv",function(d2){
                                var mydata2=d2;
                            for(i=0;i<15;i++)
                            {
                                if (mydata2.data>=0 && mydata2.data<=1)
                                    return mycolor[0];
                                else if (mydata2.data>i && mydata2.data<=(i+1)) 
                                    return mycolor[i];
                            }
                        });
                });
            });

这是有效的，但根据我的情况它没有显示颜色。有人可以指出代码有什么问题吗？

编辑：根据@UberKaeL的推荐，我的新代码就是：

queue().defer(d3.csv, "file1.csv").defer(d3.csv, "file2.csv").await(mapping);

function mapping(error,mydata1,mydata2){
var mycolor=["#00008F","#00009F","#0000AF","#0000BF","#0000CF",
                        "#0000DF","#0000EF","#0000FF","#000FFF","#001FFF",
                        "#002FFF","#003FFF","#004FFF","#005FFF","#006FFF",];
            var i;
            svg.selectAll(".circle").attr("class", "bubble").data(mydata1).enter().append("circle")
                .attr("cx", function(d){ return scaleX(d.a);})
                .attr("cy", function(d){return scaleY(d.b);})
                .attr({
                        "r": 3,
                        "fill-opacity": 0.1,
                        })
                .style("fill", function(d)
                        {  console.log("updated");
                           for(i=0;i<64;i++)
                           {
                                if (mydata2.data>=0 && mydata2.data<=1)
                                    return mycolor[0];
                                else if (mydata2.data>i && mydata2.data<=(i+1)) 
                                    return mycolor[i];
                            }
                        });
}

但仍存在颜色问题。

Answer 1

我建议您使用D3 queue library（来自d3作者）为数据收费。例如：

queue()
.defer(d3.json, "file.json")
.defer(d3.tsv, "names.tsv")
.defer(d3.csv, "file2.csv")
.await(ready);

然后

function ready(error, data1, data2, data3) { yourcode }

它将等到所有读取功能完成。

编辑：在你的程序中会喜欢那个

queue()
.defer(d3.csv, "file1.csv")
.defer(d3.csv, "file2.csv")
.await(ready);

function ready(error, dataXY, datafile2) { yourcode }

现在，您可以将dataXY和datafile2与.data()

一起使用

如何在d3js中读取一个文件中的x-y值和另一个文件中的数据？

1 个答案: