My attempt at creating checkboxes in d3 has hit a snag. Upon mouse click, the intention is for them to be filled with an "x". Strangely, using d3.select() inside the click-function doesn't seem to work as expected, although adding the letter U for the entire legend upon click does.
If someone could provide assistance, I would greatly appreciate it.
Below is the code snippet in question:
legend.append("g")
.append("rect")
.classed("checkbox", true)
.attr("x", width + 10)
.attr("height", 18)
.attr("width", 18)
.attr("stroke", "#000000")
.attr("stroke-width", "1")
.attr("fill", "#ffffff00")
.attr("checked", "false")
.attr("id", function (d) {
return "c" + valueColumns.indexOf(d);
})
function mouseclick(d) {
console.log(d);
console.log(d.target.id)
d3.selectAll(".checked")
.style("fill", "#000000") // for testing --> not working
d3.select(d.target.id)
.append("text")
.attr("x", width + 10)
.attr("dy", "0.65em")
.attr("dx", "0.65em")
.attr("alignment-baseline", "middle")
.attr("font-size", 24)
.style("fill", "#000000")
//.style("color", "#00000000")
.attr("id", function (d) {
return valueColumns.indexOf(d);
})
.attr("class", "checked")
.text("U");