Как выполнить компонент React D3 на локальном хосте - PullRequest
Новая
       23

Как выполнить компонент React D3 на локальном хосте

0 голосов
/ 30 октября 2019

Я пытаюсь создать дендрограмму, используя компонент JavaScript D3, который я нашел на Github. Вот ссылка: https://www.npmjs.com/package/react-d3-tree Я довольно новичок во всем этом, поэтому мне трудно понять, как использовать это для создания веб-приложения, которое я действительно могу запустить, как показано в демонстрационной версии (https://bkrem.github.io/react-d3-tree-demo/) В идеале я хотел бы импортировать свои собственные данные .json, но как только я запустил их, я уверен, что смогу понять это довольно легко. Любой совет был бы очень признателен, спасибо.

Попытка запустить приложение, найдя каталог в командной строке Windows и используя команду npm start.

Я думаю, что у меня нет подходящих сценариев для выполнения программы, которая будет отображаться на моем сервере localhost.

1 Ответ

1 голос
/ 30 октября 2019

Я попытался запустить код из примера, приведенного на www.npmjs.com/package/react-d3-tree на Codesandbox.io. Это сработало отлично, как и ожидалось. Я уверен, что это будет работать и на localhost. Вот код 

    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>
        );
      }
    }
...