Ich möchte ein Graphendiagramm erstellen. Dazu habe ich eine JSON-Datei erstellt. Die Skills ("java, python, HTML, json") sind die Knoten und die Indexe (KayO, BenBeck, Borea usw.) sind die Kanten. Der Knoten muss eine Mindestgröße haben und darf nicht zu groß werden. Anschließend möchte ich mit einem Klick auf den Knoten die Liste der Publikationen auf der rechten Seite aufrufen können. Dabei soll der aktuell ausgewählte Knoten in der Visualisierung hervorgehoben werden. Ich habe bereits aus diesem Beispiel (https://bl.ocks.org/heybignick/3faf257bbbbc7743bb72310d03b86ee8) was implementiert. Aber leider komme ich nicht weiter.
Diese ist meine JSON Datei:
const persona = {
"KayO": {
firstname: "Kay",
lastname: "Ohran",
City: "California",
skills: "java, python, HTML, json",
},
BenBeck: {
firstname: "Ben",
lastname: "Beckamm",
City: "New York",
skills: "css, ruby, php, training, simulator, java, web, webgl, json",
};
Das ist mein Code
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));
//linien -> Kanten
var link = svg.append("g").attr("class", "links")
.selectAll("line")
.data(graph.links).enter().append("line")
.attr("stroke", "#aaa");
//kreise -> Knoten
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;
}
