28:null 29:["$","title",null,{"children":"User-Centered | Marc | Observable"}] 2e:T1df7,chart = { const svg = d3 .create("svg") .attr("viewBox", [-width, -height, 2 * width, 2 * height]); //////////////////////////////// // ZOOM // const zoom_g = svg.append("g"); function zoomed({ transform }) { zoom_g.attr("transform", transform); } svg.call( d3 .zoom() .scaleExtent([0.2, 6]) .on("zoom", zoomed) ); //////////////////////////////// let link = zoom_g.append("g").selectAll("line"); let node = zoom_g.append("g").selectAll("circle"); let plus = zoom_g.append("g").selectAll("g"); let title = zoom_g.append("g").selectAll("text"); let simulation = d3.forceSimulation().on('tick', updateLinksAndNodes); let collisionForce = d3.forceCollide(); let linkForce = d3.forceLink().id(d => d.id); function restartSimulation() { if (simulation.alpha() <= 0.3) { simulation.alpha(0.3); simulation.restart(); } } // Kollisionsradius function getCollisionRadius(node) { if (node.item.parentId == null) return node.radius + 30; return node.radius + 10; } //////////////////////////////// // TICK-FUNKTION (wird bei jedem Tick des Force-Renderings aufgerufen) function updateLinksAndNodes() { if (linkForce) { linkForce.distance(getDistance); linkForce.strength(config.linkStrength); } if (collisionForce) { collisionForce.radius(getCollisionRadius); } simulation.force( "charge", d3.forceManyBody().strength(node => node.radius * config.manyBodyStrength) ); node .attr("cx", d => d.x) .attr("cy", d => d.y) .call(drag(simulation, updateNodeList)); title .attr("x", d => d.x) .attr("y", d => d.y) .text(d => d.item.title) .call(wrap); 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); plus.attr("transform", d => { const x = (d.target.x - d.source.x) / 2 + d.source.x; const y = (d.target.y - d.source.y) / 2 + d.source.y; return `translate(${x}, ${y})`; }); } //////////////////////////////// // Funktion, um Nodes und force zu initialisieren function updateNodeList() { validateData(); const nodes = getNodes(data); const links = filterVisibleLinks(getLinks(data), nodes); simulation .nodes(nodes) .force("charge", d3.forceManyBody().strength(config.manyBodyStrength)) .force('link', linkForce.links(links)) .force('attractCenteredNodes', attractCenter().strength(0.8)) // Einbinden der Custom force .force('x', d3.forceX().strength((config.centerStrength * 100) / width)) .force('y', d3.forceY().strength((config.centerStrength * 100) / height)) .force('collision', d3.forceCollide()) .velocityDecay(.25); node = node .data(nodes, d => d.id) .join( enter => enter.append("circle").call(g => g .transition() .ease(d3.easeCubicOut) .duration(config.transitionDuration) .attr("r", d => d.radius) ), update => update, exit => exit .transition() .ease(d3.easeCubicOut) .duration(config.transitionDuration) .attr("opacity", 0.5) .attr("r", Math.E / 4) .attr("cx", d => d.item.parent.visible ? d.item.parent.node.x : getRootNode(d).node.x ) .attr("cy", d => d.item.parent.visible ? d.item.parent.node.y : getRootNode(d).node.y ) .remove() ) .attr('cx', d => d.x) .attr("cy", d => d.y) .attr('fill', d => d.fill) .attr("stroke-width", d => { if (d.item.type === 'user') return "5px"; return d.item.isOpen ? 0.2 * d.radius + "px" : "0px"; }) .attr("stroke", d => { if (d.item.type === 'user') return '#ce1717'; return d.item.isOpen ? d.item.color + '60' : d.item.color; }) .attr('cursor', d => (d.item.children.length > 0 ? 'pointer' : '')) .on("click", (e, d) => { if (d.item.children.length > 0) { clickItem(d.id); updateNodeList(); restartSimulation(); } }) .on("contextmenu", e => e.preventDefault()) .on("mousedown", (e, d) => { // node "wünscht" ins Zentrum gerückt zu werden. // Deshalb wird ein Property mit dem aktuellen Zeitstempel geschrieben. // alle anderen Nodes zurücksetzen nodes.forEach(n => { if (n.centeredRequested) { n.centeredRequested = null; } }); d.centeredRequested = new Date(); }) .on("mouseup", (e, d) => { if (!d.centeredRequested) { return; } const startTime = d.centeredRequested; const endTime = new Date(); const shouldCenter = endTime - startTime > 500; if (shouldCenter) { // alle anderen Nodes zurücksetzen nodes.forEach(n => { if (n.centered) { n.centered = false; } }); d.centered = true; updateNodeList(); restartSimulation(); } d.centeredRequested = null; }); title = title .data(nodes, d => d.id) .join( enter => enter .append("text") .style('opacity', 0) .text(d => d.item.title) .call(g => g .transition() .ease(d3.easeCubicOut) .delay(0) .duration(config.transitionDuration) .style('opacity', 1) ), update => update, exit => exit.remove() ) .attr("x", d => d.x) .attr("y", d => d.y) .attr("font-size", d => d.radius / 4 + "px") .attr( "font-family", "-apple-system, system-ui, avenir, helvetica, roboto, noto, arial" ); link = link .data(links, d => d.target.id) .join(enter => enter .append("line") .attr("stroke-opacity", "0") .attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y) .attr("stroke", d => d.type === 'parent' ? d.source.fill : "#696969" ) .call(enter => enter .transition() .ease(d3.easeCubicOut) .delay(0) .duration(config.transitionDuration) .attr("stroke-opacity", 1) ) ); plus = plus .data(links.filter(l => l.type === 'user' || l.type === 'context')) .join(enter => enter.append("g").attr("transform", d => { const x = (d.target.x - d.source.x) / 2 + d.source.x; const y = (d.target.y - d.source.y) / 2 + d.source.y; return `translate(${x}, ${y})`; }) ); plus .append("circle") .attr("stroke", "black") .attr("fill", "white") .attr("r", "15") .attr("cx", "0") .attr("cy", "0"); plus .append("line") .attr("x1", "-10") .attr("y1", "0") .attr("x2", "10") .attr("y2", "0") .attr("stroke", "black"); plus .append("line") .attr("x1", "0") .attr("y1", "-10") .attr("x2", "0") .attr("y2", "10") .attr("stroke", "black"); } updateNodeList(); return svg.node(); }2f:T414,md`## Daten **dataItems** sind die initialen, rohen Daten. **dataLinks** sind die Verbindungen, die ein User zu den TopElementen oder die TopElemente untereinander haben können. Anhand der Funktion **initDataItems** werden diese rohen Daten initialisiert. Jedem data item wird der parent gesetzt und die Objekte für die Darstellung (node und link) erstellt und angehängt. Die Funktion **initUser** findet das dataItem mit type === 'user' und setzt im node das property centered auf true. Damit wird der User initial zentriert. Die Funktion initUser sollte mit den schon initialisierten dataItems aufgerufen werden. (Erst dann ist ein node intern enthalten) Diese Daten werden dann im Array **data** gehalten. Die Funktion **validateData** erstellt die Koordinaten der sichtbaren Nodes, damit diese um den Parent Node herum plaziert werden. Wenn die Positionen (x, y) schon erstellt wurden, werden diese nicht verändert. Die Funktion validateData wird jeweils aufgerufen, wenn ein Node geklickt wird (um die Kind-Elemente anzuzeigen) `30:T4a70,dataItems = ({ title: 'data', children: [ { id: 'bb4e2f19-934a-4853-9ac1-90ab39f28914', title: 'Hans Muster', type: 'user', color: '#000000', children: [] }, { id: 'c538911c-c4ec-4e84-a901-838ca87e0a82', title: 'Kompetenzen und Kultur', type: 'root', color: '#008bc7', children: [ { id: 'ffdf7ccc-786b-4665-be8d-d39f3c46c5e4', title: 'Kompetenzen', type: 'hierarchical', color: '#008be7', children: [ { id: 'ffdf7ccc-786b-4645-be8d-d39f3c46c5e5', title: 'DE_Komp', type: 'hierarchical', color: '#008be7' }, { id: 'ffdf7ccc-786b-4645-be8d-d39f3c46c6f5', title: 'EN_Komp', type: 'hierarchical', color: '#008be7' }, { id: 'ffdf7cf32-786b-4645-be8d-d39f3c46c5e5', title: 'FR_Komp', type: 'hierarchical', color: '#008be7' } ] }, { id: '6f84508c-d23e-4d6a-ae95-1cd390f5ee8b', title: 'Kultur', type: 'hierarchical', color: '#008be7' } ] }, { id: '38badf56-a5d4-4f97-bab6-8c1970cc4f99', title: 'Spurgebundenheit', type: 'root', color: '#6e2382', children: [ { id: '22cad427-3359-483f-bf96-7d63ac8b47c4', title: 'Sprungetwas', type: 'hierarchical', color: '#6e2382', children: [ { id: '22cad427-3359-483f-bf96-7d63ac8b47c2', title: 'DE_Sprungetwas', type: 'hierarchical', color: '#6e2382' }, { id: '22cad427-3359-453f-b796-7d63ac8b47c4', title: 'EN_Sprungetwas', type: 'hierarchical', color: '#6e2382' }, { id: '22caf227-3359-483f-bf96-7d63ac8b47c4', title: 'FR_Sprungetwas', type: 'hierarchical', color: '#6e2382' } ] }, { id: '689974ec-3d53-4d69-8017-058c88ac61cd', title: 'Sprungdas', type: 'hierarchical', color: '#6e2382', children: [ { id: '689974ec-3d53-4d69-8017-058c88ac6123', title: 'FR_Sprungdas', type: 'hierarchical', color: '#6e2382' }, { id: '689974ec-3d53-4d69-8017-058c88ac6234', title: 'DE_Sprungdas', type: 'hierarchical', color: '#6e2382' }, { id: '689974ec-3d53-4d69-8017-058c88ac6345', title: 'EN_Sprungdas', type: 'hierarchical', color: '#6e2382' }, { id: '689974ec-3d53-4d69-8017-058c88ac6456', title: 'IT_Sprungdas', type: 'hierarchical', color: '#6e2382' } ] }, { id: 'ffe4a810-e11f-4e26-bd48-23064d9850aa', title: 'Sprung_Test', type: 'hierarchical', color: '#6e2382', children: [ { id: 'ffe4a810-e11f-4e26-bd48-23064d985abc', title: 'DE_Sprung_Test', type: 'hierarchical', color: '#6e2382' }, { id: 'ffe4a810-e11f-4e26-bd48-23064d985bcd', title: 'EN_Sprung_Test', type: 'hierarchical', color: '#6e2382' }, { id: 'ffe4a810-e11f-4e26-bd48-23064d985cde', title: 'IT_Sprung_Test', type: 'hierarchical', color: '#6e2382' }, { id: 'ffe4a810-e11f-4e26-bd48-23064d985def', title: 'FR_Sprung_Test', type: 'hierarchical', color: '#6e2382' } ] } ] }, { id: '3e731d0e-9b68-448e-a3e8-3e2c4df0f3de', title: 'Mobilität', type: 'root', color: '#6e2382', children: [ { id: 'bc14e930-e197-4184-a199-25aba03c395a', title: 'Mobility Cars', type: 'hierarchical', color: '#6e2382', children: [ { id: 'bc14e930-e197-4184-a123-25aba03c395a', title: 'EN_Mobility Cars', type: 'hierarchical', color: '#6e2382' }, { id: 'bc14e930-e197-4184-a234-25aba03c395a', title: 'IT_Mobility Cars', type: 'hierarchical', color: '#6e2382' }, { id: 'bc14e930-e197-4184-a456-25aba03c395a', title: 'FR_Mobility Cars', type: 'hierarchical', color: '#6e2382' }, { id: 'bc14e930-e197-4184-a567-25aba03c395a', title: 'DE_Mobility Cars', type: 'hierarchical', color: '#6e2382' } ] } ] }, { id: 'cc633f36-50eb-431c-82eb-d8141afe2699', title: 'Bahnbetrieb EVU', type: 'root', color: '#03d0b6', children: [ { id: '1adb910d-f302-4fda-b113-c66992dfba79', title: 'Betrieb der Bahn', type: 'hierarchical', color: '#03d0e6', children: [ { id: '1adb910d-f302-4fda-a123-c66992dfba79', title: 'DE_Betrieb der Bahn', type: 'hierarchical', color: '#03d0e6' }, { id: '1adb910d-f302-4fda-a234-c66992dfba79', title: 'EN_Betrieb der Bahn', type: 'hierarchical', color: '#03d0e6' }, { id: '1adb910d-f302-4fda-a345-c66992dfba79', title: 'IT_Betrieb der Bahn', type: 'hierarchical', color: '#03d0e6' }, { id: '1adb910d-f302-4fda-a456-c66992dfba79', title: 'FR_Betrieb der Bahn', type: 'hierarchical', color: '#03d0e6' } ] } ] }, { id: 'ace1e49e-8bcc-43be-834a-0fd2905795d4', title: 'Gesamtsystem / Umfeld', type: 'root', color: '#03d03a', children: [ { id: 'd31a9041-e041-4b33-98df-66526dd3e80f', title: 'Umfeld', type: 'hierarchical', color: '#03d06a', children: [ { id: 'd31a9041-e041-4b33-98df-66526dd3e123', title: 'DE_Umfeld', type: 'hierarchical', color: '#03d06a' }, { id: 'd31a9041-e041-4b33-98df-66526dd3e234', title: 'FR_Umfeld', type: 'hierarchical', color: '#03d06a' }, { id: 'd31a9041-e041-4b33-98df-66526dd3e345', title: 'IT_Umfeld', type: 'hierarchical', color: '#03d06a' }, { id: 'd31a9041-e041-4b33-98df-66526dd3e456', title: 'EN_Umfeld', type: 'hierarchical', color: '#03d06a' } ] } ] }, { id: 'dc0569b8-98aa-44e3-9019-2b1c8ea57ab7', title: 'Neue Technologien und Systeme', type: 'root', color: '#48d003', children: [ { id: 'f9892422-5f79-4f97-a7a7-6b7353a62201', title: 'Bahnsystem', type: 'hierarchical', color: '#48d033', children: [ { id: 'f9892422-5f79-4f97-a7a7-6b7353a62123', title: 'DE_Bahnsystem', type: 'hierarchical', color: '#48d033' }, { id: 'f9892422-5f79-4f97-a7a7-6b7353a62234', title: 'EN_Bahnsystem', type: 'hierarchical', color: '#48d033' }, { id: 'f9892422-5f79-4f97-a7a7-6b7353a62345', title: 'IT_Bahnsystem', type: 'hierarchical', color: '#48d033' }, { id: 'f9892422-5f79-4f97-a7a7-6b7353a62678', title: 'FR_Bahnsystem', type: 'hierarchical', color: '#48d033' } ] } ] }, { id: '75202795-7c46-4c32-ab15-f15f18d60b39', title: 'Kunden und Märkte', type: 'root', color: '#c4d003', children: [ { id: '58d74882-3920-4604-acee-a0209dd00931', title: 'Kundenschalter', type: 'hierarchical', color: '#c4d033', children: [ { id: '58d74882-3920-4604-acee-a0209dd00123', title: 'DE_Kundenschalter', type: 'hierarchical', color: '#c4d033' }, { id: '58d74882-3920-4604-acee-a0209dd00456', title: 'IT_Kundenschalter', type: 'hierarchical', color: '#c4d033' }, { id: '58d74882-3920-4604-acee-a0209dd00569', title: 'EN_Kundenschalter', type: 'hierarchical', color: '#c4d033' }, { id: '58d74882-3920-4604-acee-a0209dd00095', title: 'FR_Kundenschalter', type: 'hierarchical', color: '#c4d033' } ] }, { id: '511c008e-218a-443d-b597-cf7c536dbbac', title: 'Kundendienst', type: 'hierarchical', color: '#c4d033', children: [ { id: '511c008e-218a-443d-b597-cf7c536db123', title: 'DE_Kundendienst', type: 'hierarchical', color: '#c4d033' }, { id: '511c008e-218a-443d-b597-cf7c536db567', title: 'EN_Kundendienst', type: 'hierarchical', color: '#c4d033' }, { id: '511c008e-218a-443d-b597-cf7c536db908', title: 'FR_Kundendienst', type: 'hierarchical', color: '#c4d033' } ] }, { id: '9cc34a77-8826-4bd5-b1ea-8a19b396e6e6', title: 'Bahnfahrten im Südtirol', type: 'hierarchical', color: '#c4d033', children: [ { id: '9cc34a77-8826-4bd5-b1ea-8a19b396e6e1', title: 'DE_Bahnfahrten im Südtirol', type: 'hierarchical', color: '#c4d033' } ] }, { id: '8ca6e9d6-9d09-46d4-8035-91fba56c6466', title: 'Abenteuerreisen', type: 'hierarchical', color: '#c4d033', children: [ { id: '8ca6e9d6-9d09-46d4-8035-91fba56c6445', title: 'DE_Abenteuerreisen', type: 'hierarchical', color: '#c4d033' }, { id: '8ca6e9d6-9d09-46d4-8035-91fba56c6415', title: 'EN_Abenteuerreisen', type: 'hierarchical', color: '#c4d033' } ] } ] }, { id: '07952be8-342a-4953-8f7f-27352d9eca93', title: 'Bereitstellung Bahninfrastruktur / Bau und Technik', type: 'root', color: '#d0bd03', children: [ { id: '92644cf1-2061-485e-9829-2f08750a74ef', title: 'Beiträge auf Home Seite Test', type: 'hierarchical', color: '#d0bd43', children: [ { id: '92644cf1-2061-485e-9829-2f08750a7401', title: 'DE_Beiträge', type: 'hierarchical', color: '#d0bd43' }, { id: '92644cf1-2061-485e-ef29-2f08750a7401', title: 'FR_Beiträge', type: 'hierarchical', color: '#d0bd43' } ] }, { id: '2963ebca-c74f-4022-8c2c-13bb635e1d98', title: 'Technik', type: 'hierarchical', color: '#d0bd43', children: [ { id: '2963ebca-c74f-4022-8cef-13bb635e1d98', title: 'DE_Technik', type: 'hierarchical', color: '#d0bd43' }, { id: '2963ebca-c74f-40ef-8cef-13bb635e1d98', title: 'IT_Technik', type: 'hierarchical', color: '#d0bd43' }, { id: '2963ebca-c74f-cd20-8cef-13bb635e1d98', title: 'FR_Technik', type: 'hierarchical', color: '#d0bd43' } ] }, { id: '7167ccac-0dcc-42db-a936-be1ea173e512', title: 'Bauarbeiten', type: 'hierarchical', color: '#d0bd43', children: [ { id: '7167ccac-0dcc-42ef-a936-be1ea173e512', title: 'DE_Bauarbeiten', type: 'hierarchical', color: '#d0bd43' }, { id: '7167ccac-0dcc-42ef-a9ab-be1ea173e512', title: 'IT_Bauarbeiten', type: 'hierarchical', color: '#d0bd43' }, { id: '7167ccac-0dcc-42ef-acb6-be1ea173e512', title: 'FR_Bauarbeiten', type: 'hierarchical', color: '#d0bd43' } ] } ] }, { id: '458c7c4b-0a09-46a5-99cc-a9460d74db70', title: 'Daten und Informationen', type: 'root', color: '#d0a803', children: [ { id: 'd5ae00c9-5309-4cde-ab8a-4961cfc3859a', title: 'zweiter langer WB-Titel', type: 'hierarchical', color: '#d0a833', children: [ { id: 'd5ae00c9-5309-4cde-ab8a-4961cfc385cd', title: 'DE_langer Titel', type: 'hierarchical', color: '#d0a833' }, { id: 'd5ae00c9-5309-4cde-ab8a-4961cfc385ef', title: 'FR_langer Titel', type: 'hierarchical', color: '#d0a833' }, { id: 'd5ae00c9-5309-4cde-ab8a-4961cfc38abd', title: 'EN_langer Titel', type: 'hierarchical', color: '#d0a833' }, { id: 'd5ae00c9-5309-4cde-ab8a-4961cfc312cd', title: 'IT_langer Titel', type: 'hierarchical', color: '#d0a833' } ] }, { id: '8b4e599c-2091-42d0-8a0a-9e9d4ade72a6', title: 'Cypress Test DE', type: 'hierarchical', color: '#d0a833', children: [ { id: '8b4e599c-2091-42d0-8a0a-9e9d4ade72de', title: 'DE_Cypress', type: 'hierarchical', color: '#d0a833' }, { id: '8b4e599c-2091-ded0-8a0a-9e9d4ade72de', title: 'FR_Cypress', type: 'hierarchical', color: '#d0a833' }, { id: '8b4e599c-2091-cdd0-8a0a-9e9d4ade72de', title: 'EN_Cypress', type: 'hierarchical', color: '#d0a833' } ] } ] }, { id: '37a8df19-f39e-4f64-b248-620e6d82c81d', title: 'Bahntechnik EVU', type: 'root', color: '#03d064', children: [ { id: 'ce59fe57-0d24-4cd6-8767-08a0a29fca79', title: 'Zugkomposition', type: 'hierarchical', color: '#03d094', children: [ { id: 'ce59fe57-0d24-4cd6-8767-08a0a29fca12', title: 'DE_Zugkomposition', type: 'hierarchical', color: '#03d094' }, { id: 'ce59fe57-0ef4-4cd6-8767-08a0a29fca12', title: 'FR_Zugkomposition', type: 'hierarchical', color: '#03d094' }, { id: 'ce59fe57-10d4-4cd6-8767-08a0a29fca12', title: 'IT_Zugkomposition', type: 'hierarchical', color: '#03d094' } ] } ] }, { id: '7678a3a8-c38a-4c2e-b399-bb1c2acb56b1', title: 'Betrieb Bahninfrastruktur', type: 'root', color: '#d04c03', children: [ { id: '8a1941d7-edbd-417a-b805-075333b6a3f8', title: 'Wissensbeitrag', type: 'hierarchical', color: '#d04c43', children: [ { id: '8a19abd7-edbd-417a-b805-075333b6a3f8', title: 'DE_Wissensbeitrag', type: 'hierarchical', color: '#d04c43' }, { id: '8a0e41d7-edbd-417a-b805-075333b6a3f8', title: 'IT_Wissensbeitrag', type: 'hierarchical', color: '#d04c43' }, { id: '8a19efd7-edbd-417a-b805-075333b6a3f8', title: 'FR_Wissensbeitrag', type: 'hierarchical', color: '#d04c43' } ] }, { id: 'de88d228-bd2b-4a4f-b745-0ac79173fcac', title: 'Bahninfrastruktur', type: 'hierarchical', color: '#d04c43', children: [ { id: 'de88d228-bd2b-4a4f-b745-0ac79173fc12', title: 'DE_Bahn', type: 'hierarchical', color: '#d04c43' }, { id: 'de88d228-bd2b-4a4f-bfe5-0ac79173fc12', title: 'EN_Bahn', type: 'hierarchical', color: '#d04c43' } ] } ] }, { id: '63977c28-94c2-40d3-82ff-f31743bfd1fb', title: 'Angebot und Fahrplan (Fahrplangebundenheit)', type: 'root', color: '#c4d003', children: [ { id: 'e466b19b-f8d8-465d-b88f-ade014d477e1', title: 'Fahrplanentwicklung', type: 'hierarchical', color: '#c4d043', children: [ { id: 'e466b19b-f8d8-465d-b88f-ade014d47fe1', title: 'DE_Entwicklung', type: 'hierarchical', color: '#c4d043' } ] } ] } ] })31:T52f,dataLinks = [ { // Von User nach Kompetenzen und Kultur source: "bb4e2f19-934a-4853-9ac1-90ab39f28914", target: "c538911c-c4ec-4e84-a901-838ca87e0a82", type: "user" }, { // Von Kompetenzen und Kultur nach Spurgebundenheit source: "c538911c-c4ec-4e84-a901-838ca87e0a82", target: "38badf56-a5d4-4f97-bab6-8c1970cc4f99", type: "context" }, { source: "bb4e2f19-934a-4853-9ac1-90ab39f28914", target: "ace1e49e-8bcc-43be-834a-0fd2905795d4", type: "user" }, { source: "bb4e2f19-934a-4853-9ac1-90ab39f28914", target: "75202795-7c46-4c32-ab15-f15f18d60b39", type: "user" }, { source: "07952be8-342a-4953-8f7f-27352d9eca93", target: "75202795-7c46-4c32-ab15-f15f18d60b39", type: "context" }, { source: "63977c28-94c2-40d3-82ff-f31743bfd1fb", target: "37a8df19-f39e-4f64-b248-620e6d82c81d", type: "context" }, { source: "63977c28-94c2-40d3-82ff-f31743bfd1fb", target: "458c7c4b-0a09-46a5-99cc-a9460d74db70", type: "context" }, { source: "c538911c-c4ec-4e84-a901-838ca87e0a82", target: "dc0569b8-98aa-44e3-9019-2b1c8ea57ab7", type: "context" }, // Zusammenhangswissen { source: "d31a9041-e041-4b33-98df-66526dd3e80f", target: "1adb910d-f302-4fda-b113-c66992dfba79", type: "context" } ]32:T4e7,function validateData() { // Position setzen (falls noch nicht erfolgt) function setPosition(items, distance = null) { if (distance == null) { distance = config.childItemInitialDistance; } let index = 0; items.forEach(item => { const angle = (360 / items.length) * index; const parentX = item.parent ? item.parent.node.x : 0; const parentY = item.parent ? item.parent.node.y : 0; const x = parentX + distance * Math.cos(angle * (Math.PI / 180)); const y = parentY + distance * Math.sin(angle * (Math.PI / 180)); if (item.node.x == null) { item.node.x = x; } if (item.node.y == null) { item.node.y = y; } index++; }); } // Rekursiv alle Kindelemente validieren. function validateItems(items) { items.forEach(item => { let isReady = true; if (!item.visible) { isReady = false; } const childrenVisible = item.children.every( childItem => childItem.visible ); if (!childrenVisible) { isReady = false; } if (isReady) { setPosition(item.children); validateItems(item.children); } }); } setPosition(data, 0); validateItems(data); }33:T76d,attractCenter = function(target) { // Custom force von hier kopiert // https://github.com/ericsoco/d3-force-attract/blob/master/lib/forceAttract.js let nodes, targets, strength, strengths; function force(alpha) { let node, target, strength; for (let i = 0; i < nodes.length; i++) { node = nodes[i]; // hier nur nodes nach target schieben, die das propertey centered=true haben // target ist standardmässig [0,0] siehe zuunterst in der Funktion if (node.centered) { target = targets[i]; strength = strengths[i]; node.vx += (target[0] - node.x) * strength * alpha; node.vy += (target[1] - node.y) * strength * alpha; } } } function initialize() { if (!nodes) return; // populate local `strengths` using `strength` accessor strengths = new Array(nodes.length); for (let i = 0; i < nodes.length; i++) strengths[i] = strength(nodes[i], i, nodes); // populate local `targets` using `target` accessor targets = new Array(nodes.length); for (let i = 0; i < nodes.length; i++) targets[i] = target(nodes[i], i, nodes); } force.initialize = _ => { nodes = _; initialize(); }; force.strength = _ => { // return existing value if no value passed if (_ == null) return strength; // coerce `strength` accessor into a function strength = typeof _ === 'function' ? _ : () => +_; // reinitialize initialize(); // allow chaining return force; }; force.target = _ => { // return existing value if no value passed if (_ == null) return target; // coerce `target` accessor into a function target = typeof _ === 'function' ? _ : () => _; // reinitialize initialize(); // allow chaining return force; }; if (!strength) force.strength(0.1); if (!target) force.target([0, 0]); return force; }34:[] 2c:{"id":"0a71b07bea05884b","slug":"user-centered","title":"User-Centered","thumbnail":"18b51e03f3c9bce2d68af74ea1e883c6249b71456e0ed119453e19b9f94cca19","access_level":"public","create_time":"$D2021-01-18T12:56:53.012Z","update_time":"$D2021-02-01T07:45:42.686Z","view_time":null,"first_public_time":"$D2021-01-18T12:58:09.837Z","has_unpublished_edits":null,"fork":{"id":"86faa98c92ec86cb","slug":"fruits","title":"Fruits","owner":{"id":"622fdb77475730ea","login":"mo23","name":"mo az"}},"stars":0,"starred":false,"owner":{"type":"team","id":"434cb156a556d773","login":"ms007","name":"Marc","avatar_url":"https://avatars-next.observableusercontent.com/2784a43d4d784dd7e5f3f20402bb6f39cae7713bc414cb32ea865151ea00580a","tier":"starter_2024"},"version":1659,"publish_version":1659,"role":null,"authored":false,"authors":[{"type":"individual","id":"b0c5a0f5aedaad15","login":"ms007","name":"Marc","avatar_url":"https://avatars-next.observableusercontent.com/2784a43d4d784dd7e5f3f20402bb6f39cae7713bc414cb32ea865151ea00580a","tier":null}],"members":[{"type":"individual","id":"b0c5a0f5aedaad15","login":"ms007","name":"Marc","avatar_url":"https://avatars-next.observableusercontent.com/2784a43d4d784dd7e5f3f20402bb6f39cae7713bc414cb32ea865151ea00580a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"User-Centered","cells":[{"id":0,"value":"md`# User-Centered`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":799,"value":"md`## CSS Style`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":757,"value":"//align-items macht aktuell nichts\nstyle = html`

html-code

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1317,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1339,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"data = initUser(initDataItems(dataItems.children))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"function initDataItems(items, parent = null) {\n const hasParent = parent != null;\n\n items.forEach(item => {\n item.parent = hasParent ? parent : null;\n item.parentId = hasParent ? parent.id : null;\n item.children = item.children || [];\n item.visible = !hasParent;\n item.isOpen = false;\n\n item.node = {\n id: item.id,\n x: null,\n y: null,\n fill: hasParent ? parent.node.fill : item.color,\n item,\n radius: !hasParent\n ? config.topElementRadius\n : item.children.length > 0\n ? config.ParentElementRadius\n : config.childElementRadius\n };\n\n item.links = dataLinks.filter(link => link.target === item.id);\n\n if (hasParent) {\n item.links = [\n ...item.links,\n { source: parent.node.id, target: item.node.id, type: 'parent' }\n ];\n }\n\n // rekursiv DataItems initialisieren\n initDataItems(item.children, item);\n });\n\n return items;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1423,"value":"initUser = items => {\n items.forEach(item => {\n item.node.centered = item.type === 'user';\n });\n\n return items;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1416,"value":"md`\n***\n## Custom Force Funktion\n\nDie Funktion **attractCenter** ist eine custom Force, die dafür sorgt, dass Nodes, bei denen das property centered auf true gesetzt wird, ins Zentrum gerückt werden. Diese Force Funktion wurde kopiert und leicht abgeändert. (siehe Source Angabe innerhalb der Funktion)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1399,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"md`\n***\n## Hilfsfunktionen\n\n**getNodes** liest die nodes aus, die angezeigt werden dürfen (visible = true).\n\nDie Nodes werden nicht neu erzeugt, es wird jeweils die gleiche Referenz auf das Objekt zurückgegeben, damit die Positionen (x, y) nicht neu initialisiert werden.\n\n**getLinks** liest die links zwischen den Nodes aus, die angezeigt werden dürfen.\n\n**filterVisibleLinks** gibt nur die Links zurück, bei denen Start und End Node beide sichtbar sind (visible)\n\n**getDistance** gibt die Distanz der Links zwischen den Nodes zurück. Je mehr Kindelemente vorhanden sind, desto grösser wird die Distanz.\n\n**clickItem** wechselt die Sichtbarkeit eines data items.\n\n**getRootNode** gibt das jeweilige TopElement des ChildNodes zurück.\n\n**drag** erlaubt es die nodes herumzuziehen.\n\n**wrap** Teilt den Titel in mehrere auf, um einen Textumbruch zu imitieren.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"function getNodes(items) {\n const nodes = [];\n\n items.forEach(item => {\n if (item.visible) {\n nodes.push(item.node);\n getNodes(item.children).forEach(childNode => nodes.push(childNode));\n }\n });\n\n return nodes;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"function getLinks(items) {\n const links = [];\n\n items.forEach(item => {\n if (item.visible) {\n item.links.forEach(link => links.push(link));\n getLinks(item.children).forEach(link => links.push(link));\n }\n });\n\n const isUserInCenter =\n items.find(d => d.type === \"user\" && d.node.centered) != null;\n\n // user links filtern, wenn user nicht im Zentrum ist\n return links.filter(l => {\n if (l.type === \"user\") {\n return isUserInCenter;\n }\n\n return l;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1629,"value":"function filterVisibleLinks(links, nodes) {\n // ToDo Das Filtern der Links muss dann im Angular besser gelöst werden.\n\n const isNodeVisible = id =>\n nodes.find(n => n.id === id && n.item.visible) != null;\n\n return links.filter(link => {\n // Alle ausser context werden bereits richtig zurückgegeben.\n if (link.type !== 'context') {\n return true;\n }\n\n const sourceId = link.source.id || link.source; // manchmal ein Objekt, manchmal ein String\n const targetId = link.target.id || link.target;\n\n return isNodeVisible(sourceId) && isNodeVisible(targetId);\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1232,"value":"function getDistance(linkDatum) {\n let source = linkDatum.source,\n target = linkDatum.target;\n\n if (linkDatum.type === \"context\") {\n return 250;\n }\n\n if (linkDatum.type === \"user\") {\n return 200;\n }\n\n const childrenCount = target.item.children.length,\n childrenVisible =\n childrenCount > 0 && target.item.children.some(item => item.visible),\n ratio = childrenCount * .2,\n factor = config.childItemDistanceFactor;\n\n return childrenCount > 0 ? 1.9 * source.radius : 1.5 * source.radius;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"function clickItem(id) {\n function toggleVisibility(parent, bol) {\n if (parent.children) {\n parent.children.forEach(item => {\n item.visible = bol;\n });\n }\n parent.isOpen = bol;\n }\n\n //lineare Suche könnte verbessert werden. Ich habe es aber ersetzt mit der bereits vorhandenen get Nodes Methode, welche die sichtbaren Nodes (was wir wollen )zurückgibt.\n var node = getNodes(data).find(node => node.id === id);\n if (!node.item) return;\n node = node.item;\n if (!node.isOpen) {\n toggleVisibility(node, true);\n } else {\n toggleVisibility(node, false);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1283,"value":"function getParent(nodes, parentId) {\n return nodes.find(item => item.id == parentId)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1027,"value":"function getRootNode(d) {\n if (!d.item) {\n if (!d.parent) return d;\n return getRootNode(d.parent);\n }\n if (!d.item.parent) return d.item;\n return getRootNode(d.item.parent);\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":708,"value":"drag = (simulation, callback) => {\n function dragsubject(event) {\n return simulation.find(event.x, event.y);\n }\n\n function dragstarted(event) {\n if (!event.active) simulation.alphaTarget(0.3).restart();\n event.subject.fx = event.subject.x;\n event.subject.fy = event.subject.y;\n }\n\n function dragged(event) {\n event.subject.fx = event.x;\n event.subject.fy = event.y;\n }\n\n function dragended(event) {\n if (!event.active) simulation.alphaTarget(0);\n // Node soll nicht mehr zentriert sein, wenn er verschoben wird\n event.subject.centered = false;\n event.subject.fx = null;\n event.subject.fy = null;\n if (callback) callback();\n }\n\n return d3\n .drag()\n .subject(dragsubject)\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1036,"value":"function wrap(text) {\n text.each(function () {\n var text = d3.select(this),\n words = text.text().split(\" \"),\n word,\n max = 1.7 * text.data().pop().radius,\n line = [],\n lineHeight = .7, // ems\n x = text.attr(\"x\"),\n y = text.attr(\"y\"),\n dy = 0.5,\n tspan = text.text(null)\n .append(\"tspan\")\n .attr(\"x\", x)\n .attr(\"dy\", dy + \"em\");\n words = words.reverse();\n while (word = words.pop()) {\n line.push(word);\n tspan.text(line.join(\" \"));\n if (tspan.node().getComputedTextLength() > max) {\n if (words.length == 0 && line.length <= 1) return;\n line.pop();\n tspan.text(line.join(\" \"));\n line = [word];\n tspan = text.append(\"tspan\")\n .attr(\"x\", x)\n .attr(\"dy\", lineHeight + dy + \"em\")\n .text(word);\n }\n }\n \n let childCount = text.node().childElementCount - 1\n y = y - (childCount * 10);\n text.attr(\"y\", y);\n });\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"md`\n***\n## Konfigurationseinstellungen\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"config = ({\n topElementRadius: 80,\n childElementRadius: 25,\n ParentElementRadius: 48,\n childItemDistanceFactor: 1,\n childItemInitialDistance: 160,\n centerStrength: 0.8,\n linkStrength: 1,\n manyBodyStrength: -30,\n transitionDuration: 400\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":869,"value":"getRandomBetween = (min, max) => {\n return Math.floor(Math.random() * (max-min + 1)) + min\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"md`\n***\n## Libraries\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 2d:"$2c:body"