D3.js - Plot a directed graph, in a chart showing axes, custom labels in every axis, and custom design in the arrows (shape of connectors)

The title says it all:

I need to know how to plot a directed graph, in a chart showing axes, every node drawn in a specific (x,y) position, custom labels in every axis, and custom design in the arrows (shape of connectors).

I mean, if I say a node must be placed in position (2,3) in a coordinated chart, the xaxis label of position 2 is named "texttwo" and the yaxis label of position 3 is named "textthree", then if I look at my chart and I look for (texttwo, textthree) position I'll see my node's name.

I'm attaching an image of the kind of chart I want to do. As you will see, a symmetry appears when drawing the connectors that way (like an ∫), and that's what matters the most. So the custom arrows is the first thing I need. The ability to give a number to groups of labels in the Y axes is a bonus (if not, then differentiate it with different colors or some other way), take a look at the attachment to get an idea.

NOTE: I don't want you to draw the same chart attached. It's insane. I just need to be able to do it myself. I'll ask you to draw a very simple version of a chart like that, only a few nodes. I need to be sure that your chart works.

It must also trigger events when hovering over the connectors, and also over the nodes.

I've read about D3.js and it seems to be a very powerful library, but you must read and learn first. That takes time that I don't want to spend.. So do you know how to do it in [url removed, login to view]

If you can do this with another Javascript library, go ahead!

Think you have all the data needed to draw the chart.

node's names

node's x axis positions

node's y axis positions

node's connectors (line) thickness

node's connectors (line) style

node's connector direction: bi-directional or not.

Example:

This is not it, but it goes something like this..

<connection bi-directional="true" thickness="bold" style="dashed">

<node type="start" name="start node" xaxis="3" yaxis="5"/>

<node type="end" name="end node" xaxis="11" yaxis="13"/>

</connection>

I'm all ears.

Ps: there are some extra features I need. If you know how to do it, then I'll give you extra money.

This will probably need some tweaking into the core of D3, so I need you to have those skills. To know how to tweak the core of a library, I mean experience in that.

Dthreejs

プロジェクトID: #8180664

プロジェクトについて