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}")没有错误。

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;