用代码绘图：在JS或PHP中渲染连接节点的图形

Question

Due to my visual impairment, I totally suck at drawing. Therefore I want to use something that I am good at in order to make a drawing.

To be specific, I want to create a graph of components in my project and how they are related to one another, or the ERM of my database.

I feel confident in PHP and JavaScript (Browser and NodeJS). Can anyone recommend me a library, framework or alike that would let me visualize such structures? Thank you!

Answer 1

Check the D3 toolkit (www.d3js.org). You can do things like this

You create nodes and links between the nodes:

    nodes=[
    {name:"Mass", symbol:"m", unit:"kg", group:1}, 
    {name:"Time", symbol:"t", unit:"s", group:1}, 
    {name:"Length", symbol:"d", unit:"m", group:1},
    {name:"Force", symbol:"F", unit:"N", group:3, formula:"F=m.a"}, 
    {name:"Velocity", symbol:"v", unit:"m/s", group:2, formula:"v=d/t"}, 
    {name:"Acceleration", symbol:"a", unit:"m/(s.s)", group:2, formula:"a=v/d"},
    {name:"Work", symbol:"W", unit:"J", group:3, formula:"W=F.d"}, 
    {name:"Momentum", symbol:"p", unit:"kg.m/s", group:2, formula:"p=m.v"}, 
    {name:"Impulse", symbol:"I", unit:"N.s", group:2, formula:"I=F.t"},
    {name:"Energy (k)", symbol:"E", unit:"J", group:3, formula:"Ek=0.5m.v.v"}, 
    {name:"Power", symbol:"P", unit:"W", group:3, formula:"P=W/t"}, 
    {name:"Pressure", symbol:"p", unit:"Pa", group:3, formula:"p=F/A"},
    {name:"Area", symbol:"A", unit:"m.m", group:4, formula:"A=d*d"}, 
    {name:"Volume", symbol:"V", unit:"m.m.m", group: "4", formula:"V=A*d"}, 
    {name:"Frequency", symbol:"f", unit:"Hz", group:4, formula:"f=1/t"}
    ],

    // the relations shown can be calculated using
    // formulas from either 1 or 2 other quantities
    links=[
    {"source":1,"target":4,"value":1}, {"source":2,"target":4,"value":1}, // velocity
    {"source":2,"target":5,"value":1}, {"source":4,"target":5,"value":1}, // acceleration
    {"source":0,"target":3,"value":1}, {"source":5,"target":3,"value":1}, // force
    {"source":4,"target":7,"value":1}, {"source":3,"target":7,"value":1}, // momentum
    {"source":2,"target":6,"value":1}, {"source":3,"target":6,"value":1}, // work
    {"source":0,"target":9,"value":1}, {"source":4,"target":9,"value":1}, // energy
    {"source":2,"target":12,"value":1}, // area 
    {"source":2,"target":13,"value":1}, {"source":12,"target":13,"value":1}, // volume
    {"source":12,"target":11,"value":1}, {"source":3,"target":11,"value":1}, // pressure
    {"source":1,"target":10,"value":1}, {"source":6,"target":10,"value":1}, // power
    {"source":3,"target":8,"value":1}, {"source":1,"target":8,"value":1}, // impulse
    {"source":1,"target":14,"value":1}
    ];