javascript - D3 change visibilty of nodes on click based on class -

javascript - D3 change visibilty of nodes on click based on class -

i have bubble chart, nodes declared below , append each circle class decided array ("category") decides category, variable color d3.scale.category10() .domain(d3.range(number of elements in "category" array));.

var node = svg.selectall("circle") .data(nodes) .enter().append("circle") .attr("class", function(d) {return category[d.cluster];}) .text(function(d) { homecoming d.text; }) .filter(function(d){ homecoming d.count >= 1; }) .style("fill", function(d) { homecoming color(d.cluster); }) .call(force.drag);

next, create legend depends on categories of each of circles color (as shown above). this, following

var legend = svg.selectall(".legend") .data(color.domain()) .enter().append("g") .attr("class", "legend") .attr("transform", function(d, i) { homecoming "translate(0," + * 20 + ")"; }); legend.append("rect") .attr("x", width - 18) .attr("width", 18) .attr("height", 18) .style("fill", color) legend.append("text") .attr("x", width - 24) .attr("y", 9) .attr("dy", ".35em") .style("text-anchor", "end") .text(function(d) { homecoming category[d]; })

now, want when user clicks legend text, bubbles corresponding category of legend hidden.

so add together next legend, text object.

.on("click", function(d){ node.selectall('.'+category[d]).style("visibility", "hidden"); });

but, not hide nodes. please help.

when phone call node.selectall() select childs of node fit selector. in case want phone call on document. have d3.selectall('.'+category[d])

javascript d3.js