0

我正在尝试使用我在 Github 上找到的 D3 JavaScript 组件创建树状图。这是链接：https ://www.npmjs.com/package/react-d3-tree 我对这整件事还很陌生，所以我很难弄清楚如何使用它来创建一个我实际上可以使用的 Web 应用程序运行，就像演示中显示的一样（https://bkrem.github.io/react-d3-tree-demo/）理想情况下，我想导入我自己的 .json 数据，但一旦我运行它，我确定我可以很容易地弄清楚这一点。任何建议将不胜感激，谢谢。

尝试通过在 Windows 命令提示符中查找目录并使用命令 npm start 来运行应用程序。

我认为我没有适当的脚本来执行将显示在我的本地主机服务器上的程序。

4

1 回答 1

1

我尝试运行 Codesandbox.io 上 www.npmjs.com/package/react-d3-tree 上给出的示例中的代码。它按预期完美运行。我相信它也可以在本地主机上运行。 这是代码

    import React from 'react';
    import Tree from 'react-d3-tree';
    //Static JSON you can always use json from a different file
    const myTreeData = [
      {
        name: 'Top Level',
        attributes: {
          keyA: 'val A',
          keyB: 'val B',
          keyC: 'val C',
        },
        children: [
          {
            name: 'Level 2: A',
            attributes: {
              keyA: 'val A',
              keyB: 'val B',
              keyC: 'val C',
            },
          },
          {
            name: 'Level 2: B',
          },
        ],
      },
    ];
    export default class MyTree extends React.Component {
      render() {
        return (
        //Wrapper
          <div id="treeWrapper" style={{width: '50em', height: '20em'}}>
          //Calling the actual library with json as a prop
            <Tree data={myTreeData} />
          </div>
        );
      }
    }
于 2019-10-30T15:26:06.640 回答