在2个不同的图中突出显示节点

Question

我正在尝试突出显示使用d3.js创建的2个不同图形中的节点。

当我将鼠标悬停在右图上的节点“ ABC”上时，我希望左图的节点“ A”，“ B”和“ C”被更改为红色。我该如何实现？我有以下代码，我知道如何突出显示该点悬停的节点，但不知道如何更改其他图形中节点的颜色。

 function draw(selector, con, json) {
  let width = document.getElementById(con).offsetWidth;
  let height = document.getElementById(con).offsetHeight;
  var svg = d3.select(selector);

  var simulation = d3
    .forceSimulation()
    .force(
      "link",
      d3.forceLink().id(function(d) {
        return d.id;
      })
    )
    .force("charge", d3.forceManyBody().strength(-320))
    .force("center", d3.forceCenter(width / 2, height / 2));

  d3.json(json, function(error, graph) {
    if (error) throw error;

    graph.links.forEach(function(d) {
      d.source = d.source;
      d.target = d.target;
    });

    var link = svg
      .append("g")
      .style("stroke", "#aaa")
      .selectAll("line")
      .data(graph.links)
      .enter()
      .append("line");

    var node = svg
      .append("g")

      .selectAll("circle")
      .attr("id", function(d) {
        return "name" + d.id;
      })
      .data(graph.nodes)
      .enter()
      .append("circle")
      .attr("class", "node")
      .on("mouseover", selectedNode)
      .on("mouseout", deselectNode)
      .call(
        d3
          .drag()
          .on("start", v => {
            if (!d3.event.active) simulation.alphaTarget(0.3).restart();
            [v.fx, v.fy] = [v.x, v.y];
          })
          .on("drag", v => {
            [v.fx, v.fy] = [d3.event.x, d3.event.y];
          })
          .on("end", v => {
            if (!d3.event.active) simulation.alphaTarget(0);
            [v.fx, v.fy] = [null, null];
          })
      );


    function selectedNode(d, i) {
      // Highlight the nodes in the other graph..
    }

    var label = svg
      .append("g")
      .selectAll("text")
      .data(graph.nodes)
      .enter()
      .append("text")
      .text(function(d) {
        return d.id;
      });

    simulation.nodes(graph.nodes).on("tick", ticked);

    simulation.force("link").links(graph.links);

    function ticked() {
      link
        .attr("x1", function(d) {
          return d.source.x;
        })
        .attr("y1", function(d) {
          return d.source.y;
        })
        .attr("x2", function(d) {
          return d.target.x;
        })
        .attr("y2", function(d) {
          return d.target.y;
        })
        .style("stroke", "#000")
        .style("stroke-width", "2.5px");

      node
        .attr("r", 24)
        .attr("class", "node")
        .attr("cx", function(d) {
          return d.x + 6;
        })
        .attr("cy", function(d) {
          return d.y - 6;
        });

      label
        .attr("x", function(d) {
          return d.x;
        })
        .attr("y", function(d) {
          return d.y;
        })
        .attr("class", "label");
    }
  });
}

draw("#graph", "lol1", "data/graph.json");
draw("#tree", "lol2", "data/tree.json");