Question

我有D3js热图图表是使用代码制作并对点击事件作出反应：

  var heatMap = svg.selectAll(".hour")
    .data(availPlain)

   // abriged...

    .on("click", function (d, i) {
        // toggle special class for clicked item
        d3.select(this).classed("selectedClass",
            d3.select(this).classed("selectedClass") ? false : true);
        var isShown=d3.select(this).classed("selectedClass");              
    });

点击处理程序中传递的参数 d 的外观如下：

 {"g":"16","station":"91","rid":"360"}

本质上是availPlain数组或用于制作图形的对象的元素。然而，我想迭代所有具有相同＆＃34; g＆＃34;的d3元素。它们的值和切换类也是如此。我很确定应该使用select / selectAll的一些后续操作，但是使用documentaion（https://github.com/mbostock/d3/wiki/Selections）来理解实际代码有点困难。那么，我如何＆＃34;分类＆＃34;所有具有数据条件的项目＆＃34; data.g == something＆＃34;？

Answer 1

想出来：

.on("click", function (d, i) {
        heatMap.filter(function(dta){return (dta.g==d.g);})
        .classed("selectedClass", 
            d3.select(this).classed("selectedClass") ? false : true);

    });

注意n＃34;这个＆＃34; in .classed和in事件处理函数表示不同的对象。

D3je：如何选择具有特定数据字段特定值的所有数据点

1 个答案: