score:5

Accepted answer

The best/simplest solution would be to have a stub index.html file which includes the scripts that you need (you could install libraries from npm as others has suggested, however this will work for libraries which only have a CDN). Thus you would have an index.html file like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Navigating Spinoza</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js"></script>
    <script src="http://marvl.infotech.monash.edu/webcola/cola.v3.min.js"></script>
    <script src="http://maurizzzio.github.io/greuler/greuler.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <div class="row" id="demo"></div>
  </body>
</html>

And then a react component like like this (I have moved some code around to better follow some react idioms):

var Component = React.createClass({    
  componentDidMount:function() {
    greuler({
      target: '#chart',
      width: 480,
      height: 500,
      data: {
        nodes: [
          {id: 0, label: "E1Def3", r: 25},
          {id: 1, label: "E1P4", r: 15},
          {id: 2, label: "E1P2", r: 15},
          {id: 3, label: "E1P1", r: 15},
          {id: 4, label: "E1P5", r: 15},
          {id: 5, label: "E1P6", r: 25}
        ],
        links: [
          {source: 0, target: 1, directed: true},
          {source: 0, target: 2, directed: true},
          {source: 0, target: 3, directed: true},
          {source: 1, target: 4, directed: true},
          {source: 2, target: 5, directed: true},
          {source: 3, target: 4, directed: true},
          {source: 4, target: 5, directed: true}
        ]
      }
    }).update()
  }

  render() {
    return (
      <div id="chart"></div>
    );
  }
}

ReactDOM.render(<Component />, document.querySelector('root'));

This is a simple solution that could stand to do more (such as use react's state and properties to pass around parameters) but this should give a general idea of the solution. This code also assumes that you have included the React and ReactDOM libraries in some way (babel, CDN, etc.).

score:0

Try installing the module with npm:

npm install greuler

See here: https://www.npmjs.com/package/greuler

Then use in your component:

var greuler = require('greuler')

score:0

You need to use a module bundler like webpack or browserify and then import the library.

npm install greuler

var greuler = require('greuler')

score:0

I got an issue like this, but the old answers cannot run. So I create this here.

Url

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js"></script>
<script src="https://fastly.jsdelivr.net/npm/webcola@3.4.0/WebCola/cola.min.js"></script>
<script src="https://fastly.jsdelivr.net/npm/greuler@1.0.0/dist/greuler.min.js"></script>
<script crossorigin src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>

JS

class Component extends React.Component {


componentDidMount() {
    greuler({
    target: '#chart',
    width: 480,
    height: 500,
    data: {
      nodes: [
        {id: 0, label: "E1Def3", r: 25},
        {id: 1, label: "E1P4", r: 15},
        {id: 2, label: "E1P2", r: 15},
        {id: 3, label: "E1P1", r: 15},
        {id: 4, label: "E1P5", r: 15},
        {id: 5, label: "E1P6", r: 25}
      ],
      links: [
        {source: 0, target: 1, directed: true},
        {source: 0, target: 2, directed: true},
        {source: 0, target: 3, directed: true},
        {source: 1, target: 4, directed: true},
        {source: 2, target: 5, directed: true},
        {source: 3, target: 4, directed: true},
        {source: 4, target: 5, directed: true}
      ]
    }
    }).update()
  }

  render() {
    return (
      <div id="chart"></div>
    );
  }
}

ReactDOM.render(<Component />, document.querySelector('#root'));

console.log(React)

https://jsfiddle.net/mango3403/qk98cf0n/32

score:1

Try this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Navigating Spinoza</title>
</head>
<body>
<div id="root"></div>
<div class="row" id="demo"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js">
</script>
<script src="http://marvl.infotech.monash.edu/webcola/cola.v3.min.js">
</script>
<script src="http://maurizzzio.github.io/greuler/greuler.min.js"></script>
<script>
    import React from 'react'
    import { render } from 'react-dom'

    var Instance = greuler({
      target: '#demo',
      width: 480,
      height: 500,
      data: {
        nodes: [
          {id: 0, label: "E1Def3", r: 25},
          {id: 1, label: "E1P4", r: 15},
          {id: 2, label: "E1P2", r: 15},
          {id: 3, label: "E1P1", r: 15},
          {id: 4, label: "E1P5", r: 15},
          {id: 5, label: "E1P6", r: 25}
        ],
        links: [
          {source: 0, target: 1, directed: true},
          {source: 0, target: 2, directed: true},
          {source: 0, target: 3, directed: true},
          {source: 1, target: 4, directed: true},
          {source: 2, target: 5, directed: true},
          {source: 3, target: 4, directed: true},
          {source: 4, target: 5, directed: true}
        ]
      }
    }).update()

    render(
      <Instance />,
      document.getElementById('root')
    )
  </script>
</body>
</html>

Related Query

More Query from same tag