如何在D3js Tidy树形图中查找选定节点的连接节点

问题描述 投票：0回答：1

我有一个像这样的整洁树形图表

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");
<!doctype html>
<html>

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

<body>
  <svg></svg>
</body>

</html>

我想找到节点B的已知连接节点列表 这里是 A 、 C 和 D

我该怎么做？

d3.js
1个回答
0
投票

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");


//find point B
const ggs = document.querySelectorAll("svg g g");
const gps = document.querySelectorAll("svg g path");
const paths = Array.from(gps).map((t) => t.getAttribute("d"));
let pnts = {}
 Array.from(ggs).forEach((t) => {
  const l = t.querySelector("text").innerHTML;
  const matrix = t.transform.baseVal["0"].matrix;
  pnts[l] =  matrix.e + "," + matrix.f;  
  pnts[pnts[l]] = l;
  });
let keys = Object.values(pnts);
//["M232,0C348,0,348,-15,464,-15", "M464,-15C580,-15,580,-15,696,-15", "M464,-15L696,5"]

const result = paths.filter((p) => p.includes(pnts["B"]))
                                         .map((p) =>  {
                        let m;
                        if(p.endsWith(pnts["B"])){
                        m = p.match(/^[A-Za-z]*(-*\d+,-*\d+)/)[1];
                      } else {
                        m = p.match(/-*\d+,-*\d+$/)[0];
                      };
                      return pnts[m];
                     })

console.log(result);
<!doctype html>
<html>

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

<body>
  <svg></svg>
</body>

</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.