如何在Javascript中创建边(链接)和节点？
如何在Javascript中创建边(链接)和节点？
提问于 2021-05-15 11:38:33
我想要创建一个图表。为此，我创建了一个JSON文件。技巧(java，python，HTML，json)应该是链接，索引(KayO，BenBeck)应该是节点。此外，节点不能低于一定的最小大小，也不能变得太大。
在此之后，我希望能够通过单击节点来调用右侧的出版物列表。应该突出显示可视化中当前选定的节点。
我已经从这个例子(https://bl.ocks.org/heybignick/3faf257bbbbc7743bb72310d03b86ee8)中实现了。但不幸的是我找不到更多了。
我经常收到的错误消息是：
Uncaught :无法读取未定义的属性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, training, simulator, java, web, webgl, json",
},
Borea: {
skills: "patent, java, Swifts, Matlab, training, head-mounted-display, HMD, SQL, games",
firstname: "Boren",
lastname: "Armin",
Birthdate: "22.04.94",
Hobby: "footbal",
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, web, css, Matlab, simulation, manufacturing, ship design, ship building",
},
BSzavaiEl: {
skills:"training, power plant, immersive, java, head-mounted displays, HMD, unity, oculus rift, games",
firstname: "Szaski",
lastname: "El mino",
Birthdate: "25.09.88",
Hobby: "language learning",
City: "Berlin",
},
BellWeins: {
skills: "speech recognition, dialog, json",
firstname: "Bella",
lastname: "Weinsetine",
Birthdate: "01.01.90",
Hobby: "drawing",
City: "Peru",
},
BerndtLukas: {
firstname: "Berndt",
lastname: "Lukas",
Birthdate: "22.02.96",
Hobby: "fitness",
City: "London",
skills: "css, ship design, modelling, CAD, ship building, design, discarded-duplicate",
},
Bjoernese: {
firstname: "Bjoerne",
lastname: "Nessi",
Birthdate: "11.09.81",
Hobby: "gardening",
City: "Mingguang",
skills: "Swifts, touch, multi-touch, css, HCI, MMI, ship design, ship building, design",
},
BlumBroll: {
firstname: "Blum",
lastname: "Brolle",
Birthdate: "22.06.91",
Hobby: "Homebrewing",
City: "Chizhou",
skills: "augmented reality, json, under water, ocean, css, games",
},
BoltRod: {
firstname: "Bolt",
lastname: "Rody",
Birthdate: "05.05.89",
Hobby: "DJing",
City: "Nanping",
skills: "Swifts, speech recognition, multimodal, object interaction, games",
},
BoltHerra: {
firstname: "Bolt",
lastname: "Herra",
Birthdate: "22.03.98",
Hobby: "Babysitting",
City: "Roseau",
skills: "Swifts, two hands, multimodal, speech recognition, eye tracking, SQL",
},
YinYang: {
skills: "Swifts, multimodal, techniques, games",
firstname: "Yin",
lastname: "Yang",
Birthdate: "01.01.55",
Hobby: "Wine tasting",
City: "San Miguel",
}
};不幸的是，我无法用给定的file.These创建节点和链接图，这是我的实际编码：
<!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>回答 1
Stack Overflow用户
回答已采纳
发布于 2021-05-15 14:59:23
您的JSON文件应该是格式的：
{
"nodes": [
{
"id": 1,
"firstName": "Bjoerne",
"lastName": "Nessi",
"birthDate": "11.09.81",
"hobby": ["Gardening", "Catering", "Psychology"],
"city": "Mingguang",
"skills": ["CSS", "HCI", "MMI"],
},
...
],
"links": [
{"source": 1, "target": 2}, ...
]
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67546326
复制相关文章
相似问题
腾讯云开发者
