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