Question

I have the graph. The graph has the nodes. There are svg circles attached to the nodes:

node.append("circle")
            .attr("class", "node")
            .attr("cx", function (d) { return 0; })
            .attr("cy", function (d) { return 0; })
            .attr("r", function (d) { return getNodeSize(d); })
            .style("fill", function (d) { return getNodeColor(d); })
            .style("stroke", function (d) { return getNodeStrokeColor(d); })
            .style("stroke-width", function (d) { return getNodeStrokeWidth(d); });

at some moment I need to repaint them with different color:

.style("fill", function (d) { return getNodeColor(d); })

How do I do that? I don’t want to redraw the whole graph..

Thanks!

P.S. relevant question: how to select just certain nodes and repaint only them?

Answer 1

You’d better to give a comprehensive id to the “circle”, and you can select it anytime you want to manipulate it.
For example:

node.append("circle")
        .attr("id", "circle-1")
        .attr("class", "node")
        .attr("cx", function (d) { return 0; })
        .attr("cy", function (d) { return 0; })
        ...

and select it via following codes:

var circles = d3.select("#circle-1");

After you get the circles, you can change the style of them.

There is another way, if you have the parent node’s id or node instance, you can select its descendant circles via following codes:

var circles = d3.select("node-id").select("circle");

or

var circles = node.select("circle");