过滤数组 link 节点

Question

我是新的 React 开发人员，在这里我使用 'react-d3-graph' 获取我的节点和 links，目前使用 'info' 我成功获取了 3 个节点和两个 links，那些 links 连接到节点。例如 link 和 'target:1' 连接到节点 'id:1' 而 link 和 'target:2' 连接到节点 'id:2' (links和节点可能比这更多）。我的问题是，有没有办法过滤这个，如果用户点击一个按钮然后从 redux 我得到 'testThis' 对象，该对象显示当前点击的按钮 'identifier' 并且该标识符可以在那些 'nodes' 名称为 'book_id'，如何过滤它，以便如果 'nodes' 包含 'book_id' 其值与 'identifier' 值相同，然后找到它并 select 它。在这种情况下，它应该 select 具有 book_id 及其 link 的节点（link 与目标 2），因此该用户只能看到两个节点和一个 link，这可能吗？那么 Graph 就会得到这个：单击按钮后：

{
  links: [
    {
      id: 1,
      source: 0,
      target: 2,
      color: 'green',
    },
  ],
  nodes: [
    {
      id: 0,
      name: 'Camera',
      x: 210,
      y: 0,
    },
    {
      book_id: 'gDUy',
      id: 2,
      name: 'livingRoom',
      x: 400,
      y: 210,
    },
  ],
};

点击按钮前：

import { Graph } from 'react-d3-graph';

const testThis ={
    identifier: "gDUy",
}


const info = {
  links: [
    {
      id: 0,
      source: 0,
      target: 1,
      color: 'green',
    },
    {
      id: 1,
      source: 0,
      target: 2,
      color: 'green',
    },
  ],
  nodes: [
    {
      id: 0,
      name: 'Camera',
      x: 210,
      y: 0,
    },
    {
      id: 1,
      name: 'Kitchen',
      x: 0,
      y: 210,
    },
    {
      book_id: 'gDUy',
      id: 2,
      name: 'livingRoom',
      x: 400,
      y: 210,
    },
  ],
};


  <Graph
          data={info}

        />

英语不是我的母语，所以可能会出错。

Answer 1

const testThis = {
  identifier: "gDUy",
}


const info = {
  links: [{
      id: 0,
      source: 0,
      target: 1,
      color: 'green',
    },
    {
      id: 1,
      source: 0,
      target: 2,
      color: 'green',
    },
  ],
  nodes: [{
      id: 0,
      name: 'Camera',
      x: 210,
      y: 0,
    },
    {
      id: 1,
      name: 'Kitchen',
      x: 0,
      y: 210,
    },
    {
      book_id: 'gDUy',
      id: 2,
      name: 'livingRoom',
      x: 400,
      y: 210,
    },
  ],
};

function filterGraph() {
  let nodes = info.nodes.filter(x => x.book_id == testThis.identifier);
  let links = info.links.filter(x => nodes.map(y => y.id).includes(x.target));
  let sourceNodes = info.nodes.filter(x => links.map(y => y.source).includes(x.id));
  let allNodes = nodes.concat(sourceNodes);
  console.log({links:links,nodes:allNodes});
}

filterGraph();

过滤数组 link 节点

filter array link node

javascript

arrays

object

reactjs