大佬教程收集整理的这篇文章主要介绍了如何在 Javascript 中创建边（链接）和节点？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我想创建一个图表。为此，我创建了一个 JsON 文件。技能（java、python、HTML、Json）应该是链接，索引（KayO、BenBeck）应该是节点。此外，节点不得低于某个最小尺寸，也不得变得太大。
之后，我希望能够通过单击节点来调出右侧的出版物列表。应突出显示可视化中当前选定的节点。
我已经从这个例子中实现了 (https://bl.ocks.org/heybignick/3faf257bbbbc7743bb72310d03b86ee8)。但不幸的是，我不能再进一步了。
我总是得到的错误信息是：
未捕获的类型错误：无法读取未定义的属性 'Json'
这是我目前的问题：
JsON 文件：
const persona = {
"KayO": {
firstname: "Kay",lastname: "Ohran",Birthdate: "11.09.64",Hobby: "footbal",City: "California",skills: "java,python,HTML,Json",},BenBeck: {
firstname: "Ben",lastname: "BeckAMM",Birthdate: "03.95.87",Hobby: "progrAMMing",City: "New York",skills: "CSS,ruby,php,@R_450_9829@ning,simulator,java,web,webgl,Borea: {
skills: "patent,Swifts,Matlab,head-mounted-display,HMD,sql,games",firstname: "Boren",lastname: "Armin",Birthdate: "22.04.94",City: "London",BeattIEH: {
firstname: "BeattIE",lastname: "Hod",Birthdate: "11.05.57",Hobby: "sleePing",City: "Texas",skills: "Oculus Rift,Unity,HCI,design,CAD,HMD",BeIErDad: {
firstname: "BeIEr",lastname: "Dadu",Birthdate: "18.07.54",Hobby: "nothing",City: "Berlin",skills: "design,CSS,simulation,manufacturing,ship design,ship building",BSzavaIEl: {
skills:"@R_450_9829@ning,power plant,immersive,head-mounted displays,unity,oculus rift,firstname: "Szaski",lastname: "El mino",Birthdate: "25.09.88",Hobby: "language learning",BellWeins: {
skills: "speech recognition,dialog,firstname: "Bella",lastname: "WeinseTine",Birthdate: "01.01.90",Hobby: "drawing",City: "Peru",BerndtLukas: {
firstname: "Berndt",lastname: "Lukas",Birthdate: "22.02.96",Hobby: "fitness",modelling,ship building,discarded-duplicate",Bjoernese: {
firstname: "Bjoerne",lastname: "nessi",Birthdate: "11.09.81",Hobby: "gardening",City: "Mingguang",skills: "Swifts,touch,multi-touch,MMI,design",Blumbroll: {
firstname: "Blum",lastname: "brolle",Birthdate: "22.06.91",Hobby: "Homebrewing",City: "Chizhou",skills: "augmented reality,Json,under water,ocean,BoltRod: {
firstname: "Bolt",lastname: "Rody",Birthdate: "05.05.89",Hobby: "DJing",City: "NanPing",speech recognition,multimodal,object interaction,BoltHerra: {
firstname: "Bolt",lastname: "Herra",Birthdate: "22.03.98",Hobby: "BabysitTing",City: "Roseau",two hands,eye tracking,sql",YinYang: {
skills: "Swifts,techniques,firstname: "Yin",lastname: "Yang",Birthdate: "01.01.55",Hobby: "Wine tasTing",City: "San Miguel",}
};
不幸的是，我无法使用给定的 JsON 文件创建节点和链接图。这些是我的实际编码：
<!DOCTYPE HTML>
<head>
<Meta charset="utf-8" />
<title>Graph_Tutorial</title>
<script src="persona.Js"></script>
<style>
body {
margin: 50px;
Font-family: Arial;
}
h2 {
clear: both;
}
svg {
float: left;
border: 1px solID black;
margin-bottom: 20px;
}
#detail_Box {
float: left;
wIDth: 500px;
height: 580px;
overflow: auto;
border: 1px solID black;
Font-size: 9pt;
margin-left: 5px;
padding: 10px;
BACkground: #eee;
}
circle {
fill: #0050aa;
}
.links {
opacity: 0.6;
}
</style>
</head>
<body>
<p>Tutorial <i>Directed Graph</i>,self-teaching</p>
<script src="https://d3Js.org/d3.v6.Js"></script>
<svg wIDth="800" height="600"></svg>
<div ID="detail_Box"></div>
<script>
const bib = persona;
console.table(bib);
const graph = {nodes: [{ID: "a"},{ID: "b"}],links: [{source: "a",target: "b"}]};
const linkcolor = d3.scalelinear().domain([0,1]).range(["#eee","#000"]);
const svg = d3.SELEct("svg");
const wIDth = +svg.attr("wIDth");
const height = +svg.attr("height");
const simulation = d3
.forceSimulation()
.force("link",d3.forcelink().ID(function (d) { return d.ID; }))
.force("charge",d3.forceManyBody())
.force("center",d3.forceCenter(wIDth / 2,height / 2));
d3.d3.Json('/',function(err,data) {
if(error) throw error;
var link = svg
.append("g")
.attr("class","links")
.SELEctAll("line")
.data(graph.links)
.enter().append("line")
.attr("stroke","#aaa");
var node = svg.append("g")
.attr("class","nodes")
.SELEctAll("circle")
.data(graph.nodes)
.enter().append("circle")
.attr("r",5)
.call(d3.drag().on("start",dragstarted).on("drag",dragged).on("end",dragended));
node.append("title").text(d => d.ID);
simulation.nodes(graph.nodes).on("tick",ticked);
simulation.force("link").links(graph.links);
function ticked() {
link
.attr("x1",d => d.source.X)
.attr("y1",d => d.source.y)
.attr("x2",d => d.target.X)
.attr("y2",d => d.target.y);
node.attr("cx",d => d.X).attr("cy",d => d.y);
}
});
function dragstarted(event) {
if (!event.activE) simulation.AlphaTarget(0.3).restart();
event.subject.fx = event.subject.x;
event.subject.fy = event.subject.y;
}
function dragged(event) {
event.subject.fx = event.x;
event.subject.fy = event.y;
}
function dragended(event) {
if (!event.activE) simulation.AlphaTarget(0);
event.subject.fx = null;
event.subject.fy = null;
}
</script>
</body>
以上是大佬教程为你收集整理的如何在 Javascript 中创建边（链接）和节点？全部内容，希望文章能够帮你解决如何在 Javascript 中创建边（链接）和节点？所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。