how to connect two nodes in D3/Tidy chart?

Question

I am using Tidy chart from D3js library and this is my code

            const data = {
                "name": "tree",
                "children": [
                    {
                        "name": "A",
                        "children": [
                            {
                                "name": "B",
                                "children": [
                                    { "name": "C", "size": 3938 },
                                ]
                            },
                            {
                                "name": "H",
                                "children": [
                                    { "name": "D", "size": 3534 },
                                    { "name": "E", "size": 5731 },
                                    { "name": "F", "size": 7840 },
                                ]
                            },
                        ]
                    }
                ]
            }

            const width = 928;

            // Compute the tree height; this approach will allow the height of the
            // SVG to scale according to the breadth (width) of the tree layout.
            const root = d3.hierarchy(data);
            const dx = 10;
            const dy = width / (root.height + 1);

            // Create a tree layout.
            const tree = d3.tree().nodeSize([dx, dy]);

            // Sort the tree and apply the layout.
            root.sort((a, b) => d3.ascending(a.data.name, b.data.name));
            tree(root);

            // Compute the extent of the tree. Note that x and y are swapped here
            // because in the tree layout, x is the breadth, but when displayed, the
            // tree extends right rather than down.
            let x0 = Infinity;
            let x1 = -x0;
            root.each(d => {
                if (d.x > x1) x1 = d.x;
                if (d.x < x0) x0 = d.x;
            });

            // Compute the adjusted height of the tree.
            const height = x1 - x0 + dx * 2;

            const svg = d3.select("svg")
                .attr("width", width)
                .attr("height", height)
                .attr("viewBox", [-dy / 3, x0 - dx, width, height])
                .attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;");

            const link = svg.append("g")
                .attr("fill", "none")
                .attr("stroke", "#555")
                .attr("stroke-opacity", 0.4)
                .attr("stroke-width", 1.5)
                .selectAll()
                .data(root.links())
                .join("path")
                .attr("d", d3.linkHorizontal()
                    .x(d => d.y)
                    .y(d => d.x));

            const node = svg.append("g")
                .attr("stroke-linejoin", "round")
                .attr("stroke-width", 3)
                .selectAll()
                .data(root.descendants())
                .join("g")
                .attr("transform", d => `translate(${d.y},${d.x})`)

            node.append("circle")
                .attr("fill", d => d.children ? "#555" : "#999")
                .attr("r", 5.5)

            node.append("text")
                .attr("dy", "0.31em")
                .attr("x", d => d.children ? -6 : 6)
                .attr("text-anchor", d => d.children ? "end" : "start")
                .text(d => d.data.name)
                .clone(true).lower()
                .attr("stroke", "white");

            d3.selectAll("circle").on("contextmenu", (event) => {
                this.selectedNode = event.srcElement.__data__.data
            })
            return svg.node();

and the char would be like this

I wanna to know can connect node D to node B vial link (red link ) ?

Answer 1

Here's a helper function that'll connect two nodes in your d3 tree:

const connectNodes = (t, f) => {
  let to = null, fr = null;
  node.each( d => {
    if (d.data.name === t) to = d;
    if (d.data.name === f) fr = d;
  });
  if (to && fr){
    link.append("path")
      .attr("d", "M" + to.y + "," + to.x + "L" + fr.y + "," + fr.x)
      .attr("fill", "none")
      .attr("stroke", "red"); 
  }             
};
connectNodes("B", "D");

Running example:

<!doctype html>

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.js"></script>
  </head>

  <body>
    <svg></svg>
    <script>
      const data = {
                "name": "tree",
                "children": [
                    {
                        "name": "A",
                        "children": [
                            {
                                "name": "B",
                                "children": [
                                    { "name": "C", "size": 3938 },
                                ]
                            },
                            {
                                "name": "H",
                                "children": [
                                    { "name": "D", "size": 3534 },
                                    { "name": "E", "size": 5731 },
                                    { "name": "F", "size": 7840 },
                                ]
                            },
                        ]
                    }
                ]
            }

            const width = 928;

            // Compute the tree height; this approach will allow the height of the
            // SVG to scale according to the breadth (width) of the tree layout.
            const root = d3.hierarchy(data);
            const dx = 10;
            const dy = width / (root.height + 1);

            // Create a tree layout.
            const tree = d3.tree().nodeSize([dx, dy]);

            // Sort the tree and apply the layout.
            root.sort((a, b) => d3.ascending(a.data.name, b.data.name));
            tree(root);

            // Compute the extent of the tree. Note that x and y are swapped here
            // because in the tree layout, x is the breadth, but when displayed, the
            // tree extends right rather than down.
            let x0 = Infinity;
            let x1 = -x0;
            root.each(d => {
                if (d.x > x1) x1 = d.x;
                if (d.x < x0) x0 = d.x;
            });

            // Compute the adjusted height of the tree.
            const height = x1 - x0 + dx * 2;

            const svg = d3.select("svg")
                .attr("width", width)
                .attr("height", height)
                .attr("viewBox", [-dy / 3, x0 - dx, width, height])
                .attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;");

            const link = svg.append("g")
                .attr("fill", "none")
                .attr("stroke", "#555")
                .attr("stroke-opacity", 0.4)
                .attr("stroke-width", 1.5)
              
              link
                .selectAll()
                .data(root.links())
                .join("path")
                .attr("d", d3.linkHorizontal()
                    .x(d => d.y)
                    .y(d => d.x));

            const node = svg.append("g")
                .attr("stroke-linejoin", "round")
                .attr("stroke-width", 3)
                .selectAll()
                .data(root.descendants())
                .join("g")
                .attr("transform", d => `translate(${d.y},${d.x})`)

            node.append("circle")
                .attr("fill", d => d.children ? "#555" : "#999")
                .attr("r", 5.5)

            node.append("text")
                .attr("dy", "0.31em")
                .attr("x", d => d.children ? -6 : 6)
                .attr("text-anchor", d => d.children ? "end" : "start")
                .text(d => d.data.name)
                .clone(true).lower()
                .attr("stroke", "white");

            d3.selectAll("circle").on("contextmenu", (event) => {
                this.selectedNode = event.srcElement.__data__.data
            });

            const connectNodes = (t, f) => {
              let to = null, fr = null;
              node.each( d => {
                if (d.data.name === t) to = d;
                if (d.data.name === f) fr = d;
              });
              if (to && fr){
                link.append("path")
                  .attr("d", "M" + to.y + "," + to.x + "L" + fr.y + "," + fr.x)
                  .attr("fill", "none")
                  .attr("stroke", "red"); 
              }             
            };
            connectNodes("B", "D");
            
      </script>
  </body>
</html>