javascript - 使用代码 : Rendering a graph of connected nodes in JS or PHP 绘图

Question

由于我的视力障碍，我画画很糟糕。所以我想用自己擅长的东西来画画。

具体来说，我想创建一个项目中组件的图表以及它们之间的关系，或者我的数据库的 ERM。

我对 PHP 和 JavaScript(浏览器和 NodeJS)充满信心。谁能推荐我一个库、框架或类似的东西来让我可视化这些结构？谢谢!

Answer 1

检查 D3 工具包 (www.d3js.org)。你可以做类似 this 的事情

您创建 Node 以及 Node 之间的链接:

    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}
    ];