Question

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

我最近尝试这样做的是嵌套选择。我首先选择所有圆圈，然后仅选择带有ids的圆圈。这是创建圈子的代码，然后进行编辑。

        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中的ids成功抓住了圈子，但我甚至不确定...有关如何改进此代码的任何建议？即使这个模型可以修复，我也觉得它有一个更清洁的解决方案。

谢谢！

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

D3 - 按ID选择

1 个答案: