React和d3-graphviz

Question

我正在尝试从我的React组件中的dotfile渲染graphviz图.我一直遇到我不明白的错误.如果有人能说出一些亮点,我将不胜感激.

import React from 'react';
import dotSrc from '../../assets/visualize_dotfile.dot';
import Viz from 'viz.js';
import * as d3 from 'd3'
import * as d3Graphviz from 'd3-graphviz';


class Visualization extends React.Component {

 setGraph() {
    console.log('DOT source =', dotSrc);
    const dotSrcLines = dotSrc.split('\n');

    d3.select(".graph").graphviz().renderDot(dotSrc);
  }

  render(){
    return (
      <div className="graph">
        {this.setGraph}
      </div>
    )
  }
}

export default Visualization;

我也尝试过:

import React, { Component } from 'react';
import { render } from 'react-dom';
import dotSrc from '../../assets/visualize_dotfile.dot';
import Viz from 'viz.js';
import HTMLReactParser from 'react-html-parser';


const graph = Viz({ files: [ { path: dotSrc } ] });

class Visualization extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
  }

  render() {
    return (
      <div>
        <div>
          {HTMLReactParser(graph)}
        </div>
      </div>
    );
  }
}

render(<Visualization />, document.getElementById('root'));

无济于事.虽然我不确定我是否使用了正确的语法,但Viz和GraphViz都不想读我的dotfile.

先感谢您.

Answer 1

目前还不清楚你想做什么以及你得到了什么错误.

此代码至少在单击按钮时从静态字符串生成图形:

import React, { Component } from 'react';
import * as d3 from 'd3'
import * as d3Graphviz from 'd3-graphviz';

var dotSrc = 'digraph  {a -> b}';

class App extends Component {
 setGraph() {
    console.log('DOT source =', dotSrc);
    d3.select(".graph").graphviz().renderDot(dotSrc);
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <h1 className="App-title">Welcome to magjac&#39;s React hack</h1>
        </header>
        <script src="https://unpkg.com/viz.js@1.8.0/viz.js" type="javascript/worker"></script>

        <div className="graph">
        </div>
        <button className="square" onClick={() => this.setGraph()}>
          {'Click me'}
        </button>
      </div>
    );
  }
}

export default App;