SOLVED
I am generating a hexbin plot in d3.js, where hexbins will be assigned different classes. I would like to change some attributes of the hexbins of a certain class on click. I would like to click on one hexbin (belonging to a class "class1"), and e.g. change the color of all the hexbins of that class to red. Here is the code I have written, which makes sense to me but it doesn't work:
svg.append("g")
.attr("clip-path", "url(#clip)")
.selectAll("path")
.data(hexbin(inputForHexbinFun))
.enter().append("path")
.attr("class", "km1")
.attr("d", hexbin.hexagon())
.attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; })
.attr("fill", function (d) { return color(d.length); })
.attr("stroke", "black")
.attr("stroke-width", "0")
.on("click", click)
.on("mouseover", mouseover)
.on("mousemove", mousemove)
.on("mouseleave", mouseleave);
})
here I have assigned the same class "km1" to all hexbins for the sake of simplicity. I have inspected the result on Chrome and I can see that the class is successfully assigned to each hexbin. The function click, defined above the generation of the plot, is as follows:
var click = function () {
d3.selectAll("class", ".km1")
.style("fill", "red")
}
as a result, on click nothing happens, and no errors appear in console.
Thank you in advance for your help!
Solution It was a silly mistake:
.selectAll does not require that you specify the type of selector, so instead of
.selectAll("class",".km1")
it is sufficient to write
.selectAll(".km1")