How to change color of multiple SVG nodes from onClick

Question

I'm building an application that links different nodes together based on their characteristics. The data structure [from Neo4j] and front end setup [D3] is like this:

graph.nodes has 4 properties:

1) id (String)

2) name (String)

3) type (String)

4) properties (Object)

Where properties has several more attributes, but for this problem, we are only considering 'properties.represents'

So when I click on a node I would like all other nodes with the same 'properties.represents' to change to the same color (in this case blue).

The specific code I'm trying to use to make this work is:

 getRep = n.properties.represents;

 graph.nodes.forEach(function(d) {
                    if (d.properties.represents == getRep) {
                        d3.select(d).style('fill', 'blue');
                    }
                });

However, this is not correct. The console outputs this error message:

Uncaught TypeError: Cannot read property 'setProperty' of undefined

Any advice on why this is not working? Thanks for your time, its greatly appreciated.

    var link = svg.selectAll(".link")
            .data(graph.links).enter()
            .append("line").attr("class", "link");

    var node = svg.selectAll(".node")
            .data(graph.nodes).enter()
            .append("circle")
            .attr("class", function (d) { console.log("Represents: " + d.properties.represents); return "node "+ d.type.toString() })
            .attr("r", radius)
            .style("fill", function(d) {return d.colr; })
            .call(force.drag);

    // html title attribute
    node.append("title")
            .text(function (d) { return d.name; })

    var state = false;
    var last = null;
    var current = null;
    node.on("click", function(n)
            {

                var metainf = "";
                currRepresents = n.properties.represents;
                metainf = metainf.concat("Title: ", n.name, "<br/>Label: ", n.type);
                console.log(metainf);
                d3.select("#metainfo")
                    .html(metainf);

                last = current;
                current = d3.select(this);
                current.style('fill', 'red');
                last.style('fill', function(d) { return d.colr; });

                getRep = n.properties.represents;

                graph.nodes.forEach(function(d) {
                    if (d.properties.represents == getRep) {
                        d3.select(d).style('fill', 'blue');
                    }
                });
            });

Answer 1

You can't select elements by their data. However, you can filter a selection:

svg.selectAll(".node")
   .filter(function(d) { return d.properties.represents == getRep; })
   .style('fill', 'blue');