Question

我是d3的新手，没有javascript专家。我发现了类似的问题，但没有一个是我正在寻找的。我有两个csv文件，其中一个学校数据看起来像这样 ID，姓名，经度，纬度

其他csv有网络数据

id ， netId （这是连接的其他学校ID），点击（这基本上是两者之间有多少连接学校）

我将学校数据绑定到地图上的圆圈。我想要做的就是点击一下，找到每个连接的学校，并根据他们有多少连接在地图上转换他们的圈子。

我假设这需要一系列for循环，但我不确定最好的方法。目前，跳过所有地图创建的东西，我有这个：

    var currData = [];

 d3.csv("network.csv", function(networkData){
    d3.csv("schoolData.csv", function(data) {

             //create the circles

             var circle = svg.selectAll("circle")
     //bind the data
                    .data(data)
                    .enter()
                    .append("circle")
                    .attr("cx", function(d) {
                        return projection([d.lon, d.lat])[0];
                    })
                    .attr("cy", function(d) {
                        return projection([d.lon, d.lat])[1];
                    })

                //initial style of circles (will move this into a class eventually)
                    .attr("r", 5)
                    .style("fill", "orange")
                    .style("opacity", 0.75)



            //on click 
                    .on("click", function (d) {


            for (i = 0; i<= networkData.length; i++) {
                    if(d.id == networkData[i].id) {  
                    currData.push({"netId": networkData[i].netId,
                                    "hits": networkData[i].hits}
                        )}
                    };

如果我在for循环中将其记录到控制台，则返回netId和hits，但我似乎无法访问for循环之外的currData。我不知道为什么。我也不确定采用每个后续netIds并将它们链接回绑定到圆形元素的学校数据的最佳方法。我是否比必要的更复杂？ D3有一个简单的方法吗？

当在地图上点击一个圆圈时，我需要在所选学校的网络中找到学校的ID，然后根据点击次数在地图上更改他们的圆圈。非常像this。

数据如下所示：

School Data: 

id,school,lon,lat
1,UC Berkeley,-122.250502,37.872855
2,UC Los Angeles,-118.445227,34.06886
3,Cal State Los Angeles,-118.168266,34.068232
4,University of Southern California,-118.2866414,34.021801

Network Data:

id,netId,hits
193,220,1
193,229,5
193,226,1
193,49,1
124,226,11
124,201,1
278,175,7
341,227,1
341,310,2
341,135,1
101,201,1

Answer 1

如果您希望能够根据其数据属性选择元素，最简单的方法是根据该数据为元素提供类名。例如，你的所有学校元素都可以根据数据中的id来设置一个类，“s-1”，“s-203”等。

然后，当您从网络数据表中找到行中引用的id时，可以轻松选择相应的元素并根据需要进行更改。

这是一个例子。我正在使用Array.forEach()而不是for循环，但它与你所拥有的相似。我不太确定你是如何使用过滤后的数据阵列以及它为什么不适合你，但希望这会让你开始：

http://fiddle.jshell.net/V5DCx/

但是，不是在每次点击时扫描网络数据，而是可能需要预先操作数据并将其包含在学校的数据对象中。您可以使用d3.nest根据ID将网络数据分组到子阵列中，然后对学校阵列进行一次排序，将正确的网络子阵列附加到学校数据，然后将学校数据附加到d3图形。然后它会在你的function(d)事件处理程序中等待。

D3基于两个不同的数据集更改元素？

1 个答案: