clicking a node in d3 from a button outside the svg

Question

I have created a force directed graph using D3 and displayed the id of the nodes in a normal div. I need to highlight the node whose id has been clicked in the div. I have s

Answer 1

When you write:

…and using normal javascript tried to click it…

what do you mean?

If you mean that you wrote code like:

mySVGElement.click();

then that is your problem. Not all DOM elements have a click() method like a <button> or <input…> may. Instead, you need to simulate and fire your own click event:

function simulateClick(elementToClick){
  var evt = document.createEvent("MouseEvents");
  evt.initMouseEvent("click", true, true, window,
    0, 0, 0, 0, 0, false, false, false, false, 0, null);
  var canceled = !elementToClick.dispatchEvent(evt);
  return canceled; //Indicate if `preventDefault` was called during handling
}

Answer 2

More generally, if the user interacts with element A, how do you select (and then modify) related elements B? There are many ways of achieving this, but here are three common approaches.

Option 1. For one-to-one mappings, select by id.

If each element in A has exactly one corresponding element in B, you can select the related element B by id, such as d3.select("#foo") to select a <div id="foo">.

This approach requires setting an id for each element in B using selection.attr. This is easiest if your data has an intrinsic unique identifier, such as d.name or d.id:

b.attr("id", function(d) { return d.id; });

Next, to enable clicking on elements A to change the fill color of the corresponding element in B, use selection.on to register a click listener, and then select by id:

a.on("click", function(d) {
  d3.select("#" + d.id).style("fill", "red");
});

Identifiers must be both unique and valid. For example, the id must start with a letter and not a number, and can't contain spaces. If your data doesn't already have a unique identifier, you could generate one from the index, such as

b.attr("id", function(d, i) { return "b-" + i; });

And later, assuming the elements A are in the same order,

a.on("click", function(d, i) {
  d3.select("#b-" + i).style("fill", "red");
});

You could also iterate over your data array to generate a unique identifier.

Option 2. For one-to-many mappings, select by class.

To select elements of class "foo", such as a <div class="foo">, say d3.selectAll(".foo"). Use this approach if any element in A corresponds to multiple elements in B. For example, if you had a force-directed graph showing the relationships between students, you might color the nodes based on each student's year, and then use a legend to toggle the visibility of each year.

As with the previous approach, you can use selection.attr to set the "class" attribute. In this case, the class attribute is not unique, so it might come from a d.type property in the data:

b.attr("class", function(d) { return d.type; })

If you have multiple legends for different categorical attributes of data, you could also be more specific and prefix the class name. To continue the student year example:

b.attr("class", function(d) { return "year-" + d.year; })

Setting the class attribute will replace any previously-set classes, so if you want to apply multiple classes to the elements, you need to join them together with a space when setting the "class" attribute.

Next, to enable clicking on elements A to change the fill color of the corresponding elements in B, use selection.on to register a click listener, and then select by class:

a.on("click", function(d) {
  d3.selectAll("." + d.type).style("fill", "red");
});

Note that we're using selectAll here rather than select; that's because we want to select all corresponding elements, rather than just the first one. Again, you'll need to make sure that the class attribute is valid.

Option 3. For everything else, select and filter by data.

The previous two approaches generate ids and classes so that the browser can index the elements in B for efficient selection. For a small number of elements, or when more general selection methods are needed, you can omit specifying "id" or "class" attributes and simply select manually by selection.filter.

Let's call the datum associated with each element in A da, and the datum associated with each element in B db. Now all we have to do is define an expression that returns true when da matches db. For example, if we wanted to filter by type:

a.on("click", function(da) {
  b.filter(function(db) { return da.type == db.type; }).style("fill", "red");
});

The first two options are preferred, but occasionally manual filtering is useful, such as when you have a range slider and want to filter based on a quantitative variable.