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都不想读取我的点文件，尽管我也不确定我使用的语法是否正确。

提前谢谢你。

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;