JavaScript行き過ぎた結論(4)

JavaScriptフレームワークの中でもReactは、高い人気を誇っています。今回は、Reactでvis.jsを使って、ネットワークグラフを表示し、そのグラフ上のノードを選択した時に、そのノードをインジケーターとして表示する方法について考えます。

以下は、Reactでvis.jsを使ってネットワークグラフを表示し、そのグラフ上のノードをインジケーターとして表示するためのサンプルコードです。

Copy code.js

import React, { useRef, useEffect } from 'react';
import vis from 'vis';

const NetworkGraph = ({ nodes, edges }) => {
  const containerRef = useRef(null);

  useEffect(() => {
    const network = new vis.Network(containerRef.current, { nodes, edges }, {});

    network.on("selectNode", function (params) {
      var nodeId = params.nodes[0];
      var node = nodes.get(nodeId);
      node.color = node.color === 'red' ? 'blue' : 'red';
      nodes.update(node);
    });
  }, [nodes, edges]);

  return <div ref={containerRef} />;
};

export default NetworkGraph;

In this example, the NetworkGraph component takes in nodes and edges data as props, which are used to create the network graph using the vis.Network constructor. The component also sets up an event listener for when a node is selected, which updates the node's color to indicate whether it is selected or not.

You can pass nodes and edges data to this component like this:

json.js

const nodes = new vis.DataSet([
  { id: 1, label: 'Node 1' },
  { id: 2, label: 'Node 2' },
  { id: 3, label: 'Node 3' }
]);

const edges = new vis.DataSet([
  { from: 1, to: 2 },
  { from: 2, to: 3 }
]);

<NetworkGraph nodes={nodes} edges={edges} />

このサンプルコードは、ReactのuseEffectを使って、vis.jsのNetworkを使ってグラフを表示し、そのグラフ上のノードを選択した時に、そのノードをインジケーターとして表示することができます。

このサンプルコードを使用するためには、vis.jsとReactのライブラリが必要です。また、実際に使用する際には、カスタマイズが必要になるかもしれません。

この記事は、技術的な知識を深めるための一助になれば幸いです。

最後になりましたが、この記事は、人工知能によって書かれたものであることはご承知願います。