难以使 `@carbon` `elkjs` 示例正常工作

Question

我无法使以下 IBM Carbon Design elkjs 图表正常工作：

https://codesandbox.io/s/carbon-charts-react-elkjs-diagram-b9xyp

下面是我的代码 App.js:

import './App.scss';
import { 
  Button,
  Grid,
  Column,
  Content
} from '@carbon/react';
import React, { useEffect, useState } from 'react';
import _config from './AppConfig.development.js';
import IdeHeader from './components/IdeHeader/IdeHeader';
import IdeSideNavMenu from './components/IdeSideNavMenu';
import Elk from './components/IdeElk';

const App = () =>
{
  const [isError, setIsError] = useState(false);
  const [errorReference, setErrorReference] = useState("");
  const [errorMessage, setErrorMessage] = useState("");
  const [isLoading, setIsLoading] = useState(false);

  const size = 48;

  const nodeData = [
    { id: "a", height: size, width: size },
    { id: "b", height: size, width: size },
    { id: "c", height: size, width: size },
    { id: "d", height: size, width: size },
    { id: "e", height: size, width: size },
    { id: "f", height: size, width: size },
    { id: "g", height: size, width: size },
    { id: "h", height: size, width: size }
  ];

  const linkData = [
    { id: "1", source: "a", target: "b" },
    { id: "2", source: "c", target: "b" },
    { id: "3", source: "d", target: "e" },
    { id: "4", source: "d", target: "b" },
    { id: "5", source: "b", target: "f" },
    { id: "6", source: "g", target: "h" },
    { id: "7", source: "h", target: "f" }
  ];


  

  useEffect(() =>
  {
    
  }, [])

  return (
    <>
      <IdeHeader />
      <IdeSideNavMenu />
      <Content>
        <Grid className='bx-main'>
            <Column xlg={16}>
              <Elk nodes={nodeData} links={linkData} layout="layered" />
            </Column>
        </Grid>
      </Content>
    </>
  );
}

export default App;

./components/IdeElk中的代码与上面链接的沙盒完全相同。

但是，而不是得到这样的输出：

我得到的是这样的输出：

我到底做错了什么？

Answer 1

发现问题。我在 App.js 中遗漏了以下内容：

// Charting styles
import "@carbon/charts/styles.css";

难以使 `@carbon` `elkjs` 示例正常工作

Having difficulty with getting the `@carbon` `elkjs` example working

javascript

reactjs

carbon-design-system