WORDCLOUDをVIS.JSにマッピング

前回は上記の挑戦をやってみた。
しかしながらCYTOSCAPE.jsにはどうしても解決できない問題があった

EDGE長さを数値で指定できない
・レイアウトCOSE　→　×
・レイアウトCOLA　→　どうもうまくいかない

結果的にであるが、CYTOSCAPE.JSはやめることにして、VIS.JSに取り組んでいる。

ただしVIS.JSには、課題があって、NODEにSVGをマッピングすることができない。
（正確に言うと、REACT-COMPONENTの使い方が分からない・・・というのが正直なところ）

cytoscape.jsの場合

以下のように、COMPONENTにcy={(cy) => { myCyRef = cy; }を足すことで
DOMを直接触って参照できる。

sample.js

let myCyRef = null;

constructor(props) {
    super(props);
    this.state = {
      elements: {},
    }
  }

  componentDidMount() {
    const Cross = fetchCrossvalidData();
    this.setState({ elements: Cross });
  }

componentDidUpdate() {
    this.loadSVG();
    }

loadSVG() {
    this.state.elements.map((value, index, array) => {
      const params = { // some querying code was written here  // }
      const query = new URLSearchParams(params);
      fetch(
        apiurl+'/svg?'+query.toString()
      )
        .then(r => r.text())
        .then(data => {
          if(data.indexOf('<svg')>0)  //get some svg data
          {
          data=data.replaceAll('\\',"").slice(1).slice(0,-1);
          myCyRef.filter("node[id='" + value['data'].id + "']").css("background-image", "data:image/svg+xml;utf8," + encodeURIComponent(data));
          }
        }).catch(err => {
          console.log(err);
        });
    });
  }
render() {
    if (this.state.elements.length > 0 && this.state.crossvalid.length > 0) {
      
      return (
        <CytoscapeComponent cy={(cy) => { myCyRef = cy; }}
          stylesheet={styles}
          elements={this.state.elements}
          style={{ minWidth: "800", minHeight: "800px" }}
          layout={layout}
        />
      );
    } else {
      return <div className="App">
        Loading...Patent Data</div>
    }
  }

vis.jsの場合

出来ると言えばできるのであるが、REACTのコンポーネントになっていない。
HOOKを使えば出来るのかもしれないが、ソースが無いとコピペできない。

いまここでREACTの勉強中です。
（誰がCOMPONENTの作り方教えてください）

sample.js

    var nodes = new vis.DataSet([
      { id: 1, shape: "circularImage", image: "dummy.png" },
      { id: 2, shape: "circularImage", image: "dummy.png" },
    ]);

    network = new vis.Network(container, data, options);

    network.on("click", function(properties) {
          nodes.update({ id: properties.nodes[0], image: 'image.svg' });
        });
    });