D3 Graphviz d3.select.graphviz is not a function

Question

I am trying to run this below ReactJs code and I am getting an error: d3.select.graphviz() is not a function

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"))

I read about an article which said adding const _ = d3Graphviz.graphviz ; would be the fix. But it didn't solve the issue. However d3Graphviz.graphviz worked for me.

I would like to know what could be the fix for using

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

Answer 1

For d3-graphviz@2.6.1, you can use graphviz(`xxx`).renderDot(`digraph{a->b}`). Example:

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;