【发布时间】：2021-08-05 08:04:30
【问题描述】：
我想创建一个图表。为此，我创建了一个 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, 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",
}
};
不幸的是，我无法使用给定的 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>
【问题讨论】：
-
用
d3.json替换d3.d3.json -
@MichaelRovinsky - 抱歉我没看到。但是知道我还有另外两条错误消息：“未捕获（承诺中）SyntaxError：意外的令牌
-
'/'不是有效的文件路径 -
JSON 文件不能以
const persona = {开头。它应该以{开头 -
另一种方法是将
const persona = {放入一个JS文件中，并将其用作硬编码变量，而不是在运行时加载JSON文件。好的做法是加载 JSON，JSON 应该符合格式。
标签： javascript json d3.js