chart = { var links = force_graph_data.links.map(d => Object.create(d)); var nodes = force_graph_data.nodes.map(d => Object.create(d)); nodes = nodes.filter(function (node) { const provided_bys = node.provided_by.split('|'); // Filter the returned array based on specified filters return provided_bys.some((feild) => sources_checkbox.includes(feild)); }); nodes = nodes.filter(function (node) { const groups = node.group.split('|'); // Filter the returned array based on specified filters return groups.some((feild) => nodes_checkbox.includes(feild)); }); links = links.filter(function (link) { const provided_bys = link.provided_by.split('|'); // Filter the returned array based on specified filters return provided_bys.some((feild) => sources_checkbox.includes(feild)) && edges_checkbox.includes(link.value) && nodes.find(node => node.id === link.source) !== undefined && nodes.find(node => node.id === link.target) !== undefined; }); const groups = d3.set(nodes.map(function(d){return d.group})).values(); // keep track of if tooltip is hidden or not var isTooltipHidden = true; const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id)) .force("charge", d3.forceManyBody()) .force("center", d3.forceCenter(width / 2, height / 2)); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); let g = svg.append("g") const link = g.append("g") .attr("stroke", "#999") .attr("stroke-opacity", 0.6) .selectAll("line") .data(links) .join("line") .attr("stroke-width", d => Math.sqrt(d.value)) .on("click", clickLink); const node = g.append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll("circle") .data(nodes) .join("circle") .attr("r", 7) .attr("fill", color) .call(drag(simulation)) .on("click", clickNode); function clickNode(node) { mutable search_term = node.name // update visibility isTooltipHidden = !isTooltipHidden; var visibility = (isTooltipHidden) ? "hidden" : "visible"; // load tooltip content (if it changes based on node) loadNodeTooltipContent(node); if (isTooltipHidden) { unPinNode(node); } // place tooltip where cursor was return tooltip.style("top", (d3.event.pageY -10) + "px").style("left", (d3.event.pageX + 10) + "px").style("visibility", visibility); } function clickLink(link) { // update visibility isTooltipHidden = !isTooltipHidden; var visibility = (isTooltipHidden) ? "hidden" : "visible"; // load tooltip content (if it changes based on node) loadLinkTooltipContent(link); if (isTooltipHidden) { unPinLink(link); } // place tooltip where cursor was return tooltip.style("top", (d3.event.pageY -10) + "px").style("left", (d3.event.pageX + 10) + "px").style("visibility", visibility); } // reset nodes to not be pinned function unPinNode(node) { node.fx = null; node.fy = null; } // reset nodes to not be pinned function unPinLink(link) { node.fx = null; node.fy = null; } // add html content to tooltip function loadNodeTooltipContent(node) { var htmlContent = "

"; htmlContent += `

Name: ${node.name} <\/h4>` htmlContent += "

Category: " + node.group + "<\/h4>" if(node.id.includes("PHARMGKB:")){ const cleaned_id = node.id.replace("PHARMGKB:",""); htmlContent += `

Id: ${node.id} <\/h4>` } else if(node.id.includes("UniProtKB:")){ const cleaned_id = node.id.replace("UniProtKB:",""); htmlContent += `

Id: ${node.id} <\/h4>` } else if(node.id.includes("HP:")){ htmlContent += `

Id: ${node.id} <\/h4>` } else if(node.id.includes("GO:")){ htmlContent += `

Id: ${node.id} <\/h4>` } else if(node.id.includes("ttd.drug:")){ const cleaned_id = node.id.replace("ttd.drug:",""); htmlContent += `

Id: ${node.id} <\/h4>` } else if(node.id.includes("CHEBI:")){ const cleaned_id = node.id.replace("CHEBI:",""); htmlContent += `

Id: ${node.id} <\/h4>` } else if(node.id.includes("CHEMBL.COMPOUND:")){ const cleaned_id = node.id.replace("CHEMBL.COMPOUND:",""); htmlContent += `

Id: ${node.id} <\/h4>` } else if(node.id.includes("NCBITaxon:")){ const cleaned_id = node.id.replace("NCBITaxon:",""); htmlContent += `

Id: ${node.id} <\/h4>` } else{ htmlContent += "

Id: " + node.id + "<\/h4>" } htmlContent += "

Provided By: " + node.provided_by + "<\/h4>" htmlContent += "<\/div>" tooltip.html(htmlContent); } function loadLinkTooltipContent(link) { var htmlContent = "
"; htmlContent += `
Link Type: ${link.value}<\/h4>` htmlContent += `
Source: ${link.source.name}<\/h4>` htmlContent += `
Target: ${link.target.name}<\/h4>` htmlContent += `
Relation: ${link.relation}<\/h4>` htmlContent += `
Provided By: ${link.provided_by}<\/h4>` if(link.publication !== ""){ const clean_publication = link.publication.replace(":",""); htmlContent += `
Publication: ${clean_publication} <\/h4>` } htmlContent += "<\/div>" tooltip.html(htmlContent); } // add tooltip to HTML body var tooltip = d3.select("body") .append("div") .attr("class", "tooltip") .style("position", "absolute") .style("padding", "10px") .style("z-index", "10") .style("width", "300px") .style("height", "200px") .style("background-color", "rgba(230, 242, 255, 0.8)") .style("border-radius", "5px") .style("visibility", "hidden") .text(""); node.append("title") .text(d => d.name); simulation.on("tick", () => { 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); }); //add zoom capabilities let zoomHandler = d3.zoom() .on("zoom",zoomAction); //Zoom functions function zoomAction(){ g.attr("transform", `translate(${width / 2+ d3.event.transform.x}, ${height / 2+ d3.event.transform.y })`+ "scale(" + d3.event.transform.k + ")"); } zoomHandler(svg); invalidation.then(() => simulation.stop()); // Usually you have a color scale in your chart already // var color = d3.scaleOrdinal() // .domain(groups) // .range(d3.schemeSet2); // // Add one dot in the legend for each name. // g.selectAll("mydots") // .data(groups) // .enter() // .append("circle") // .attr("cx", 100) // .attr("cy", function(d,i){ return 100 + i25}) // 100 is where the first dot appears. 25 is the distance between dots // .attr("r", 7) // .style("fill", function(d){ return color(d)}) // // Add one dot in the legend for each name. // g.selectAll("mylabels") // .data(groups) // .enter() // .append("text") // .attr("x", 120) // .attr("y", function(d,i){ return 100 + i25}) // 100 is where the first dot appears. 25 is the distance between dots // .style("fill", function(d){ return color(d)}) // .text(function(d){ return d}) // .attr("text-anchor", "left") // .style("alignment-baseline", "middle") return svg.node(); }