javascript - D3 - 按 id 选择

Question

data.json 每个条目都有一个 id 字段。此 ID 直接映射到 test.csv 中的 ID。我正在为 data.json 中的每个对象创建圆圈。然后我想读取 test.csv 并仅更改 test.csv 中出现的 id 圆圈的属性。我想我可能在这里遗漏了一些基本的东西......

我最近的尝试是嵌套选择。我首先选择所有圈子，然后仅选择具有相关 ID 的圈子。以下是创建圆圈并对其进行编辑的代码。

        d3.json("data.json", function(error, data){
            svg.selectAll("circle")
                .data(data)
                .enter()
                .append("circle")
                .attr("stroke", "black")
                .attr("fill", "white")
                .attr("r", 4)
                .attr("cx", function(d){ return d.x; })
                .attr("cy", function(d){ return d.y; })
                .attr("id", function(d){return "i:" + d.id;})
                .append("svg:title")
                .text(function(d){ return d.id; });
        });

        d3.csv("test.csv", function(csv){
            csv.sort(function(a,b){
                return new Date(b.timestamp+"Z") < new Date(a.timestamp+"Z") ? 1 : -1;
            });

            svg.selectAll("circle")
                .data(csv)
                .selectAll( function(d) { return "#i:" + d.roomId; } )
                .data(function(d) { return d; } )
                .transition()
                .duration(500)
                .attr("fill", "red");
        });

总结一下结果，没有任何反应。最初的圆圈已创建，但过渡从未发生。一些打印语句表明我成功地使用 test.csv 中的 id 捕获了圆圈，但我什至不确定......有关如何改进此代码的任何建议吗？即使这个模型可以修复，我也感觉有一个更干净的解决方案。

谢谢!

Answer 1

对于第二部分，您需要像这样的循环，而不是嵌套选择:

csv.forEach(function(d) {
  svg.select("#i:" + d.roomId)
  .transition()
  .duration(500)
  .attr("fill", "red");
})

另一种方法是加载这两个文件，并在附加圆圈的同时根据 CSV 的内容执行您想要执行的操作:

d3.json(url, function(error, data) {
  d3.csv(url, function(error, csv) {
    // preprocess CSV
    svg.selectAll("circle").data(data).enter().append("circle")
       // set attributes
       // filter selection to contain only those elements that appear in the CSV as well
       .filter(function(d) {
         return csv.filter(function(e) { return e.roomId == d.id; }).length > 0;
       })
       .transition()
       .duration(500)
       .attr("fill", "red");
  });
});