0

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

0 Answers0