chart = { const links = displayLinks.map(d => Object.create(d)); const nodes = displayNodes.map(d => Object.create(d)); const [width, height] = [1000, 600]; const svg = d3.select(DOM.svg(width, height)); const aiScoreMinDiff = 0.05; // create link reference let linkedByIndex = {}; data.links.forEach(d => { linkedByIndex[`${d.source},${d.target}`] = true; }); // nodes map let nodesById = {}; data.nodes.forEach(d => { nodesById[d.id] = {...d}; }) const isConnectedAsSource = (a, b) => linkedByIndex[`${a},${b}`]; const isConnectedAsTarget = (a, b) => linkedByIndex[`${b},${a}`]; const isConnected = (a, b) => isConnectedAsTarget(a, b) || isConnectedAsSource(a, b) || a === b; const isEqual = (a, b) => a === b; const nodeRadius = d => 15 * d.support; const baseGroup = svg.append("g"); function zoomed() { baseGroup.attr("transform", d3.event.transform); } const zoom = d3.zoom() .scaleExtent([0.2, 8]) //.translateExtent([[-100, -100], [width + 1000, height + 1000]]) .on("zoom", zoomed); //svg.call(zoom); let ifClicked = false; const simulation = d3.forceSimulation(nodes) .force("y", d3.forceY(height/2).strength(0.1)) .force("center", d3.forceCenter(width / 2, height / 2)) .force("x", d3.forceX(width/2)) .force("link", d3.forceLink(links).id(d => d.id).distance(10).strength(0.2)) .force("charge", d3.forceManyBody()) .force("collide", d3.forceCollide().radius(d => getNodeSize(d) + 0.5).iterations(2)) const link = baseGroup.append("g") .selectAll("line") .data(links) .join("line") .classed('link', true) .style('stroke', 0.1) .style("stroke-opacity", 0); const node = baseGroup.append("g") .selectAll("circle") .data(nodes) .join("circle") .classed('node', true) .attr("r", d => getNodeSize(d)) .attr("fill", d => getMpColor(d)) .attr("opacity", 0.8); function ticked() { link .attr("x1", function(d) { return d.source.x; }) .attr("y1", function(d) { return d.source.y; }) .attr("x2", function(d) { return d.target.x; }) .attr("y2", function(d) { return d.target.y; }); node .attr("cx", function(d) { return d.x; }) .attr("cy", function(d) { return d.y; }); } simulation .nodes(nodes) .on("tick", ticked); simulation.force("link") .links(links); const mouseOverFunction = d => { tooltip.style("visibility", "visible") .html(() => { if (influencersCsv.map(d => d[""]).includes(d.id)) { const content = `Influencer: ${getInfluencerName(d.id)}`+'
' +`Bio: ${getInfluencerBio(d.id)}`; return content} if(mpCsv.map(d => d["Name"]).includes(d.name)){ const content = `MP: ${d.id}`+'
'; return content } }); if (ifClicked) return; node .transition(500) .style('fill', o => getInfluencerColor(o.id)) .style('opacity', o => { const isConnectedValue = isConnected(o.id, d.id); if (isConnectedValue) { return 0.8; } return 0.3; }) ; link .transition(500) .style('stroke-opacity', o => { return (o.source === d || o.target === d ? 1 : 0)}) .transition(500) .attr('marker-end', o => (o.source === d || o.target === d ? 'url(#arrowhead)' : 'url()')); }; const mouseOutFunction = d => { tooltip.style("visibility", "hidden"); if (ifClicked) return; node .transition(500) .style('opacity', 0.8); link .transition(500) .style("stroke-opacity", 0)//o => { }; const mouseClickFunction = d => { // we don't want the click event bubble up to svg d3.event.stopPropagation(); // menuItems.attr('visibility', "hidden"); ifClicked = true; node .transition(500) .style('opacity', 0.8) link .transition(500); node .transition(500) .style('opacity', o => { const isConnectedValue = isConnected(o.id, d.id); if (isConnectedValue) { return 0.8; } return 0.3 }) link .transition(500) .style('stroke-opacity', o => (o.source === d || o.target === d ? 1 : 0)) .transition(500) .attr('marker-end', o => (o.source === d || o.target === d ? 'url(#arrowhead)' : 'url()')); }; const rightClickActions = (d, menuItem, i) => { }; const rightClickFunction = d => { d3.event.preventDefault(); // add clicked effect: highlight right-clicked item ifClicked = true; node .transition(500) .style('opacity', 0.8) link .transition(500); node .transition(500) .style('opacity', o => { const isConnectedValue = isConnected(o.id, d.id); if (isConnectedValue) { return 0.8; } return 0.3 }) link .transition(500) .style('stroke-opacity', o => (o.source === d || o.target === d ? 1 : 0.1)) .transition(500) .attr('marker-end', o => (o.source === d || o.target === d ? 'url(#arrowhead)' : 'url()')); tooltip.style("visibility", "hidden"); const position = {x: d.x, y: d.y}; }; node.on('mouseover', mouseOverFunction) .on('mouseout', mouseOutFunction) .on('click', mouseClickFunction) .on('contextmenu', rightClickFunction) .on('mousemove', () => tooltip.style("top", (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px")); svg.on('click', () => { ifClicked = false; node .transition(500) .style('opacity', 0.8); link .transition(500) .style("stroke-opacity", 0) //menuItems.attr('visibility', "hidden"); }); //invalidation.then(() => layout.stop()); return svg.node(); }