I have a force directed graph as shown in the JSFiddle. I have been trying to add an arrow at the end of every link from the central node with no success as every attempt generates some error, which being an absolute beginner, I simply can't debug. Besides, I would also like to label every link (with INCLUDES, EXCLUDES, or EXEMPTS) which are described as type fields in link array (please check the JSFiddle). Also, does D3 allow for custom divs to be used as nodes? I was wondering if the node text could be placed in a div with the following CSS properties:

.node
{
  border: 1px solid red;
  padding: 5px;
  border-radius: 5px;
}

Something like this is what I need, except that the nodes need to be in a rectangular card (as applying the CSS above would do). However, my attempts to port from the code have been in vain. Please note that I am using d3 js v5. Here's another example which I have failed to port to d3 v5.

Here's what I am trying to achieve, ideally: