React-D3-Gaph无法将节点移动到一个Spesific项目中

Question

我在一个单独的项目中修改了此组件。正常工作。然后，我将该细分市场复制到我的主要项目中。但是，该图毫无问题地呈现，当我尝试更改任何节点的位置时，它不起作用并创建这些错误。 在此处输入图像描述

在两个项目中，D3的版本都是相同的。我认为它可能是其他一些组件引起的，我试图在app.js中渲染它，但仍然没有起作用。我想知道是什么原因造成的，找不到。

import * as React from "react"; 
import { Graph } from "react-d3-graph"; 

const data = {   nodes: [
    { id: "NEWS1", color: "black", size: 800 },
    { id: "NEWS2", color: "black", size: 800 },
    { id: "NEWS3", color: "black", size: 800 },
    { id: "NEWS4", color: "black", size: 800 },
    { id: "Sharer1", color: "red", size: 300 },
    { id: "Sharer2", color: "green", size: 300 },
    { id: "Sharer3", color: "red", size: 300 },
    { id: "Sharer4", color: "red", size: 300 },
    { id: "Sharer11", color: "red", size: 300 },
    { id: "Sharer12", color: "red", size: 300 },
    { id: "Sharer13", color: "red", size: 300 },
    { id: "Sharer21", color: "red", size: 300 },
    { id: "Sharer22", color: "red", size: 300 },
    { id: "Sharer23", color: "red", size: 300 },
    { id: "Sharer31", color: "red", size: 300 },
    { id: "Sharer32", color: "red", size: 300 },
    { id: "Sharer33", color: "red", size: 300 },
    { id: "Sharer41", color: "red", size: 300 },
    { id: "Sharer411", color: "red", size: 300 },
    { id: "Sharer4111", color: "red", size: 300 }   ],   
links: [
    { source: "NEWS1", target: "Sharer1" },
    { source: "NEWS2", target: "Sharer2" },
    { source: "NEWS3", target: "Sharer3" },
    { source: "NEWS4", target: "Sharer4" },
    { source: "Sharer1", target: "Sharer11" },
    { source: "Sharer1", target: "Sharer12" },
    { source: "Sharer1", target: "Sharer13" },
    { source: "Sharer2", target: "Sharer21" },
    { source: "Sharer2", target: "Sharer22" },
    { source: "Sharer2", target: "Sharer23" },
    { source: "Sharer3", target: "Sharer31" },
    { source: "Sharer3", target: "Sharer32" },
    { source: "Sharer3", target: "Sharer33" },
    { source: "Sharer4", target: "Sharer41" },
    { source: "Sharer41", target: "Sharer411" },
    { source: "Sharer411", target: "Sharer4111" }   ] };

const myConfig = {   nodeHighlightBehavior: true,   node: {
    color: "lightgreen",
    size: 120,
    labelProperty: "id",
    highlightStrokeColor: "blue"   },   link: {
    type: "LINE_SMOOTH",
    highlightColor: "red"   } };

function NetworkGraph() {
    const [state,showModal] = React.useState(false)
    const handleShowMessageClick = (id) => showModal(true);
    const handleCloseModal = (id) => showModal(false);   const onClickGraph = () => {
    //  window.alert(`Clicked the graph background`);   };

  const onClickNode = (nodeId) => {
    //   };

  const onDoubleClickNode = (nodeId) => {
    // window.alert(`Double clicked node ${nodeId}`);   };

  const onRightClickNode = (event, nodeId) => {
    // window.alert(`Right clicked node ${nodeId}`);   };

  const onMouseOverNode = (nodeId) => {
    //handleShowMessageClick(nodeId);   };

  const onMouseOutNode = (nodeId) => {
    //handleCloseModal(nodeId);   };

  const onClickLink = (source, target) => {
    // window.alert(`Clicked link between ${source} and ${target}`);   };

  const onRightClickLink = (event, source, target) => {
    // window.alert(`Right clicked link between ${source} and ${target}`);   };

  const onMouseOverLink = (source, target) => {
    // window.alert(`Mouse over in link between ${source} and ${target}`);   };

  const onMouseOutLink = (source, target) => {
    // window.alert(`Mouse out link between ${source} and ${target}`);   };

  return (
    <div>
      <Graph
        id="graph-id" 
        data={data}
        config={myConfig}
        onClickNode={onClickNode}
        onRightClickNode={onRightClickNode}
        onClickGraph={onClickGraph}
        onClickLink={onClickLink}
        onRightClickLink={onRightClickLink}
        onMouseOverNode={onMouseOverNode}
        onMouseOutNode={onMouseOutNode}
        onMouseOverLink={onMouseOverLink}
        onMouseOutLink={onMouseOutLink}
      />
    </div> ); }

export default NetworkGraph