Network component needs documentation, and API could allow rendering custom nodes

Network component seem to be poorly documented on how to use with Layers, as well as interactivity. My immediate desire is to be able to show some information about a node on hover (or always), such as a label. I can’t seem to find anything about this anywhere, and it seems to be a very common use case for this type of data visualization. There isn’t much to learn from an unlabeled graph.

Ideally the API would allow for rendering any arbitrary component as a node, which would take the place of supplying nodeColor, nodeBorderWidth, nodeBorderColor and allow for more flexibility. For example:

const CustomNodesNetwork = data => {
  const renderNode = node => (
    <svg width="50" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <g>
        <rect
          x={10}
          y={10}
          width={30}
          height={30}
          fill={node.color}
         />
        <text
          x={0}
          y={0}
          fill="black"
        >
          {node.label}
        </text>
      </g>
    </svg>
  );

  return (
    <ResponsiveNetwork
      height={700}
      nodes={data.nodes}
      links={data.links}
      renderNode={t => renderNode(t)}
      linkThickness={t => (2 * (2 - t.source.depth))}
    />
  );
}

Alternatively, a default label/hover behavior could easily render some text under certain conditions:

    <ResponsiveNetwork
      ...
      nodeLabel={t => t.label}
      labelVisibility={visible: boolean | string}
    />

Thanks for your hard work on this excellent library, and sorry if this the library already has this capability and I’m just dumb! First time using anything D3.js related.

[plouc]

No worries, it does not support this, and that’s definitely an interesting suggestion, I’m currently working on migrating the whole codebase to TypeScript and trying to improve some packages in the process, I’ll see what I can do about this then, do not expect this feature to be available soon though as I currently have a limited amount of time to spend on side projects.

[iDreadful]

Voting for these features! My use case is a uses relationship map where the nodes are their userpics. Thank you for the great work!