D3 Graphviz报错：d3.select.graphviz不是一个函数。

Question

我正在尝试运行以下ReactJs代码，但是出现错误：d3.select.graphviz() 不是一个函数。

import * as React                 from "react"
import * as ReactDOM              from "react-dom"
import * as d3                    from 'd3'
import * as d3Graphviz            from 'd3-graphviz'

const _ = d3Graphviz.graphviz ;

class DotViewer extends React.Component<{},{}>{
  constructor(props){
    super(props)
    this.renderGraph = this.renderGraph.bind(this)
  }
  render(){
    return <div className='DotViewer'>
      <div className='dot_view_port'></div>
    </div>
  }
  componentDidMount(){this.renderGraph()}
  renderGraph(){

    d3.select(".dot_view_port").graphviz().renderDot("digraph{a->b}")


  }
}

ReactDOM.render(<DotViewer/>, document.getElementById("main"))

我读到一篇文章说添加const _ = d3Graphviz.graphviz;可以解决问题，但这并没有解决这个问题。然而d3Graphviz.graphviz对我有用。

我想知道如何修复使用d3.select(".dot_view_port").graphviz().renderDot("digraph{a->b}")时不出错的问题。

- raosa

Answer 1

对于d3-graphviz@2.6.1版本，您可以使用graphviz(`xxx`).renderDot(`digraph{a->b}`)。例如：

import React, { Component } from "react";
import {graphviz} from "d3-graphviz";

class Dot extends Component{

    constructor(props) {
        super();
        this.draw = this.draw.bind(this);
    }

    componentDidMount() {
        this.draw()
    }

    draw(){
        graphviz(`#graph-body`).renderDot(`digraph{a->b}`);
    }

    render(){
        return(
            <div id="graph-body">
            </div>
        )
    }
}

export default Dot;

- anbrito