Spaces:
Sleeping
Sleeping
| <html> | |
| <head> | |
| <link rel = "stylesheet" href = "css1/tree.css"> | |
| <link rel = "stylesheet" href = "css1/div.css"> | |
| <link rel = "stylesheet" href = "css1/side.css"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <style> | |
| body {background-color: floralwhite;} | |
| </style> | |
| <style> | |
| #d1 { | |
| display: block; | |
| } | |
| #d2 { | |
| display: none; | |
| } | |
| table { | |
| border-collapse: collapse; | |
| table-layout: fixed; | |
| width: 100%; | |
| } | |
| th, td { | |
| border: 1px solid black; | |
| padding: 5px; | |
| text-align: center; | |
| } | |
| tr:hover { | |
| background-color: lightgoldenrodyellow; | |
| } | |
| th{ | |
| position: sticky; | |
| top: 0; | |
| background-color: lightsteelblue; | |
| } | |
| </style> | |
| <center> | |
| <h1 style="color:black;">Causal Text to Knowledge Graph </h1> | |
| </center> | |
| </head> | |
| <body> | |
| <div id = "container"> | |
| <div id = "tree"> | |
| <script src="https://d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var treeData = [ | |
| { | |
| "name": "Performance or Not", | |
| "children": [ | |
| { | |
| "name": "Performance (P)", | |
| "children": [ | |
| { | |
| "name": "Investors (INV)" | |
| }, | |
| { | |
| "name": "Customers (CUS)" | |
| }, | |
| { | |
| "name": "Employees (EMP)" | |
| }, | |
| { | |
| "name": "Society (SOC)" | |
| }, | |
| { | |
| "name": "Unclassified" | |
| } | |
| ] | |
| }, | |
| { | |
| "name": "Non-performance (NP)", | |
| } | |
| ] | |
| } | |
| ]; | |
| var margin = {top: 20, right: 120, bottom: 20, left: 120}, | |
| width = 800 - margin.right - margin.left, | |
| height = 620 - margin.top - margin.bottom; | |
| var i = 0, | |
| duration = 750, | |
| root; | |
| var tree = d3.layout.tree() | |
| .size([height, width]); | |
| var diagonal = d3.svg.diagonal() | |
| .projection(function(d) { return [d.y, d.x]; }); | |
| var svg3 = d3.select("#tree").append("svg") | |
| .attr("width", width + margin.right + margin.left) | |
| .attr("height", height + margin.top + margin.bottom) | |
| .append("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| root = treeData[0]; | |
| root.x0 = height / 2; | |
| root.y0 = 0; | |
| function collapse(d) { | |
| if (d.children) { | |
| d._children = d.children; | |
| d._children.forEach(collapse); | |
| d.children = null; | |
| } | |
| } | |
| root.children.forEach(collapse); | |
| update(root); | |
| function update(source) { | |
| // Compute the new tree layout. | |
| var nodes = tree.nodes(root).reverse(), | |
| links = tree.links(nodes); | |
| // Normalize for fixed-depth. | |
| nodes.forEach(function(d) { d.y = d.depth * 200; }); | |
| // Update the nodes… | |
| var node = svg3.selectAll("g.node") | |
| .data(nodes, function(d) { return d.id || (d.id = ++i); }); | |
| // Enter any new nodes at the parent's previous position. | |
| var nodeEnter = node.enter().append("g") | |
| .attr("class", "node") | |
| .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; }) | |
| .on("click", click); | |
| nodeEnter.append("circle") | |
| .attr("r", 1e-6) | |
| .style("fill", function(d) { | |
| if(d.name == "Performance or Not") { | |
| return "white"; | |
| } | |
| else if (d.name != "Non-performance (NP)") { | |
| return "blue"; | |
| } | |
| else { | |
| return "gray"; | |
| } | |
| }); | |
| nodeEnter.append("text") | |
| .attr("x", function(d) { return d.children || d._children ? -10 : 10; }) | |
| .attr("dy", ".35em") | |
| .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; }) | |
| .text(function(d) { return d.name; }) | |
| .style("fill-opacity", 1e-6); | |
| var nodeUpdate = node.transition() | |
| .duration(duration) | |
| .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; }); | |
| nodeUpdate.select("circle") | |
| .attr("r", 8) | |
| .style("fill", function(d) { | |
| if(d.name == "Performance or Not") { | |
| return "white"; | |
| } | |
| else if (d.name != "Non-performance (NP)") { | |
| return "blue"; | |
| } | |
| else { | |
| return "gray"; | |
| } | |
| }); | |
| nodeUpdate.select("text") | |
| .style("fill-opacity", 1); | |
| // Transition exiting nodes to the parent's new position. | |
| var nodeExit = node.exit().transition() | |
| .duration(duration) | |
| .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; }) | |
| .remove(); | |
| nodeExit.select("circle") | |
| .attr("r", 1e-6); | |
| nodeExit.select("text") | |
| .style("fill-opacity", 1e-6); | |
| // Update the links… | |
| var link = svg3.selectAll("path.link") | |
| .data(links, function(d) { return d.target.id; }); | |
| // Enter any new links at the parent's previous position. | |
| link.enter().insert("path", "g") | |
| .attr("class", "link") | |
| .attr("d", function(d) { | |
| var o = {x: source.x0, y: source.y0}; | |
| return diagonal({source: o, target: o}); | |
| }); | |
| link.style("stroke","gray"); | |
| // Transition links to their new position. | |
| link.transition() | |
| .duration(duration) | |
| .attr("d", diagonal); | |
| // Transition exiting nodes to the parent's new position. | |
| link.exit().transition() | |
| .duration(duration) | |
| .attr("d", function(d) { | |
| var o = {x: source.x, y: source.y}; | |
| return diagonal({source: o, target: o}); | |
| }) | |
| .remove(); | |
| // Stash the old positions for transition. | |
| nodes.forEach(function(d) { | |
| d.x0 = d.x; | |
| d.y0 = d.y; | |
| }); | |
| console.log(nodes.length); | |
| if(nodes.length ==3){ | |
| var x = document.getElementById("d1"); | |
| var y = document.getElementById("d2"); | |
| x.style.display = "block"; | |
| y.style.display = "none"; | |
| var container = document.querySelector(".container"); | |
| container.style.display = "none"; | |
| } else if(nodes.length >=8){ | |
| var x = document.getElementById("d1"); | |
| var y = document.getElementById("d2"); | |
| x.style.display = "none"; | |
| y.style.display = "block"; | |
| var container = document.querySelector(".container"); | |
| container.style.display = "none"; | |
| }else if(nodes.length ==1){ | |
| var x = document.getElementById("d1"); | |
| var y = document.getElementById("d2"); | |
| x.style.display = "none"; | |
| y.style.display = "none"; | |
| var container = document.querySelector(".container"); | |
| container.style.display = "none"; | |
| } | |
| } | |
| // Toggle children on click. | |
| function click(d) { | |
| if (d.children) { | |
| d._children = d.children; | |
| d.children = null; | |
| } else { | |
| d.children = d._children; | |
| d._children = null; | |
| } | |
| update(d); | |
| } | |
| </script> | |
| </div> | |
| <div id="d1"> | |
| <script src="https://d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var width = 620, | |
| height = 570; | |
| var svg = d3.select("#d1").append("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .append("g"); | |
| var nodes1 = [ | |
| {x: width / 4, y: height / 2, label: "Non-Performance"}, | |
| {x: 3 * width / 4, y: height / 2, label: "Performance"} | |
| ]; | |
| var links1 = [ | |
| {source: nodes1[0], target: nodes1[1]} | |
| ]; | |
| var simulation1 = d3.layout.force() | |
| .nodes(d3.values(nodes1)) | |
| .links(links1) | |
| .size([width, height]) | |
| .linkDistance(400) | |
| .charge(-3000) | |
| .start(); | |
| var text1 = svg.append("g") | |
| .attr("class", "labels") | |
| .selectAll("text") | |
| .data(nodes1) | |
| .enter().append("text") | |
| .text(function(d) { return d.label; }) | |
| .attr("x", function(d) { return d.x+15; }) | |
| .attr("y", function(d) { return d.y+20; }); | |
| var link1 = svg.selectAll(".link") | |
| .data(links1) | |
| .enter() | |
| .append("line") | |
| .attr("class", "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; }); | |
| link1.style("stroke","gray") | |
| .style("stroke-width",1.5+"px"); | |
| var node1 = svg.append("g") | |
| .attr("class", "nodes") | |
| .selectAll("circle") | |
| .data(nodes1) | |
| .enter().append("circle") | |
| .attr("r", 20) | |
| .style("fill", function(d){ | |
| if(d.label == "Non-Performance"){ | |
| return "gray"; | |
| }else { | |
| return "blue"; | |
| } | |
| }) | |
| .attr("cx", function(d) { return d.x; }) | |
| .attr("cy", function(d) { return d.y; }) | |
| .on("mousedown",mousedown); | |
| function mousedown(d) { | |
| var tableContainer = d3.select('.container'); | |
| tableContainer.remove(); | |
| d3.select("table").remove(); | |
| const nodeName = d.label; | |
| console.log("Hovering over node:", nodeName); | |
| var container = d3.select('body') | |
| .append('div') | |
| .attr('class', 'container') | |
| .style('height', '250px') | |
| .style('overflow', 'auto'); | |
| // Create the table element inside the container | |
| var table = container.append('table') | |
| .attr('class', 'table') | |
| .style('table-layout', 'fixed') | |
| // Add a header row | |
| const headerRow = table.append("tr"); | |
| headerRow.append("th").text("Id"); | |
| headerRow.append("th").text("Full Sentence"); | |
| headerRow.append("th").text("Component"); | |
| headerRow.append("th").text("cause/effect"); | |
| headerRow.append("th").text("Label level1"); | |
| headerRow.append("th").text("Label level2"); | |
| // Add a data row for the hovered node | |
| d3.json("ch.json", function(data) { | |
| var table = d3.select("table"); // select the existing table | |
| var tbody = table.append("tbody"); // create a tbody element | |
| // loop through each item in the data array | |
| for (var i = 0; i < data.length; i++) { | |
| console.log(nodeName); | |
| console.log([data[i].Labellevel1]) | |
| if(nodeName == [data[i].Labellevel1]) { | |
| console.log("yipee") | |
| var tr = tbody.append("tr"); // create a table row for each item | |
| // append a table cell with the Id property | |
| tr.append("td").text(data[i].Id); | |
| tr.append("td").text([data[i].Fullsentence]); | |
| tr.append("td").text([data[i].Component]); | |
| tr.append("td").text([data[i].causeOrEffect]); | |
| tr.append("td").text([data[i].Labellevel1]); | |
| tr.append("td").text([data[i].Labellevel2]); | |
| } | |
| } | |
| }); | |
| } | |
| svg.append("text") | |
| .attr("x", width/2 + 10) | |
| .attr("y", height - 150) | |
| .attr("text-anchor", "middle") | |
| .text(" Click on a node to get the detailed results") | |
| .style("font-weight", "bold") | |
| .style("font-family", "Times New Roman") | |
| .style("font-size", "16px") | |
| .style("opacity", 0) | |
| .transition() | |
| .duration(2000) | |
| .style("opacity", 1); | |
| // Add the path using this helper function | |
| </script> | |
| </div> | |
| <div id="d2"> | |
| <script src="https://d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| d3.json("smalljson.json", function(data) { | |
| var links = data; | |
| console.log(links) | |
| // Compute the distinct nodes from the links. | |
| links.sort(function(a,b) { | |
| if (a.source > b.source) {return 1;} | |
| else if (a.source < b.source) {return -1;} | |
| else { | |
| if (a.target > b.target) {return 1;} | |
| if (a.target < b.target) {return -1;} | |
| else {return 0;} | |
| } | |
| }); | |
| //any links with duplicate source and target get an incremented 'linknum' | |
| for (var i=0; i<links.length; i++) { | |
| if (i != 0 && | |
| links[i].source == links[i-1].source && | |
| links[i].target == links[i-1].target) { | |
| links[i].linknum = links[i-1].linknum + 1; | |
| } | |
| else {links[i].linknum = 1;}; | |
| }; | |
| var nodes = {}; | |
| //links = links.filter(function(link) { | |
| // return link.value !== 0; | |
| //}); | |
| // Compute the distinct nodes from the links. | |
| links.forEach(function(link) { | |
| link.source = nodes[link.source] || (nodes[link.source] = {name: link.source}); | |
| link.target = nodes[link.target] || (nodes[link.target] = {name: link.target}); | |
| }); | |
| console.log("hello") | |
| const map1 = new Map(); | |
| for (var nodeName in nodes) { | |
| var sum = 0; | |
| console.log("sum"+nodeName) | |
| links.forEach(function (link) { | |
| if(nodeName == link.source.name || nodeName == link.target.name) { | |
| console.log("sum"+link.source.name) | |
| sum = sum + link.value | |
| } | |
| map1.set(nodeName, sum); | |
| }); | |
| } | |
| console.log(map1.get('Customers')); | |
| const mapSort2 = new Map([...map1.entries()].sort((a, b) => a[1] - b[1])); | |
| console.log(mapSort2); | |
| var width = 650, | |
| height = 620; | |
| var force = d3.layout.force() | |
| .nodes(d3.values(nodes)) | |
| .links(links) | |
| .size([width, height]) | |
| .linkDistance(380) | |
| .charge(-3000) | |
| .on("tick", tick) | |
| .start(); | |
| var svg2 = d3.select("#d2").append("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| //.call(d3.behavior.zoom().on("zoom", function () { | |
| // svg2.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")") | |
| // })) | |
| .append("g"); | |
| svg2.append("svg:defs").selectAll("marker") | |
| .data(["arrow"]) | |
| .enter().append("svg:marker") | |
| .attr("id", String) | |
| .attr("viewBox", "0 -5 10 10") | |
| .attr("refX", 22) | |
| .attr("refY", -1.8) | |
| .attr("markerWidth", 6) | |
| .attr("markerHeight", 6) | |
| .attr("orient", "auto") | |
| .append("svg:path") | |
| .attr("d", "M0,-5L10,0L0,5") | |
| var selflink = svg2.append("svg:g").selectAll(".selflink") | |
| .data(force.links()) | |
| .enter().append("path") | |
| .attr("class","link"); | |
| selflink.style("stroke","lightgray") | |
| // Per-type markers, as they don't inherit styles. | |
| var path = svg2.append("svg:g").selectAll("path") | |
| .data(force.links()) | |
| .enter().append("svg:path") | |
| .attr("class", "link") | |
| .attr("id",function(d,i) { return "linkId_" + i; }) | |
| .attr("marker-end", function(d) { | |
| if (d.source.name != d.target.name) { | |
| console.log("arrow"+ "url(#arrow)"); | |
| return "url(#arrow)"; | |
| } else { | |
| return ""; | |
| } | |
| }); | |
| path.style("stroke-width",function(d) { | |
| if(d.value > 50) { | |
| return 2 + "px"; | |
| }else{ | |
| return 2 + "px"; | |
| } | |
| }) | |
| function clickLink(d) { | |
| var linkClicked = d.name | |
| } | |
| var colorScale = d3.scale.linear() | |
| .domain([0, 60]) // Set the domain of the scale to the minimum and maximum possible values of d.value | |
| .range(["#C0C0C0", "black"]); // Set the range of the scale to the minimum and maximum desired colors | |
| path.style("stroke", function(d) { | |
| console.log(d.value+colorScale(d.value)) | |
| return colorScale(d.value); // Use the scale to map the value of d.value to a color | |
| }); | |
| /*function handleMouseOver(d, i) { | |
| // select all the paths attached to the node and highlight them | |
| d3.selectAll('.link') | |
| .filter(function(l) { return l.source === d || l.target === d; }) | |
| .style('stroke', 'black') | |
| .style('stroke-width', '2'); | |
| // reduce the opacity of all other links | |
| d3.selectAll('.link') | |
| .filter(function(l) { return l.source !== d && l.target !== d; }) | |
| .style('opacity', 0.1); | |
| } | |
| function handleMouseOut(d, i) { | |
| // select all the paths attached to the node and reset their styles | |
| d3.selectAll('.link') | |
| .filter(function(l) { return l.source === d || l.target === d; }) | |
| .style('stroke', null) | |
| .style('stroke-width', null); | |
| path.style("stroke-width",function(d){ | |
| if(d.type > 167){ | |
| return "6px" | |
| }else if(d.type > 160){ | |
| return "5px" | |
| }else if(d.type > 50){ | |
| return "4px" | |
| }else if(d.type > 40){ | |
| return "3px" | |
| }else if(d.type > 4){ | |
| return "2px" | |
| }else if(d.type > 1){ | |
| return "1px" | |
| } | |
| else if(d.type >0){ | |
| return "0px" | |
| }else if(d.type ==0){ | |
| return "0.5px" | |
| } | |
| }); | |
| path.style("stroke",function(d){ | |
| if(d.type > 167) { | |
| return "black" | |
| } | |
| }); | |
| // reset the opacity of all other links | |
| d3.selectAll('.link') | |
| .filter(function(l) { return l.source !== d && l.target !== d; }) | |
| .style('opacity', 1); | |
| }*/ | |
| // var node = svg.append("g").selectAll("node") | |
| // .data(force.nodes()) | |
| // .enter().append("circle") | |
| // .attr("r", 10) | |
| // .call(force.drag); | |
| /* var selflinktext = svg2.append("svg:g").selectAll(".selflinktext") | |
| .data(force.links()) | |
| .enter().append("text") | |
| selflinktext.filter(function(d) { return d.source === d.target; }) | |
| .attr("x", function(d) { return d.source.x; }) | |
| .attr("y", function(d) { return d.source.y; }) | |
| .text(function(d) { console.log("ji"+d.value); | |
| return d.value; });*/ | |
| //.attr("class", function(d) { return "link " + d.value; }) | |
| //.attr("id",function(d,i) { return "linkId_" + i; }) | |
| // .attr("marker-end", function(d) { console.log("value"+d.value) | |
| // return "url(#" + d.value + ")"; }); | |
| var node = svg2.selectAll(".node") | |
| .data(force.nodes()) | |
| .enter().append("g") | |
| .attr("class", "node") | |
| //.on("mouseover", mouseover) | |
| //.on("mouseout", mouseout) | |
| .on("mouseenter", (evt, d) => { | |
| path | |
| .attr("display", "none") | |
| .filter(l => l.source.type === d.type || l.target.type === d.type) | |
| .attr("display", "block"); | |
| }) | |
| .on("mouseleave", evt => { | |
| path.attr("display", "block"); | |
| }) | |
| .on("mousedown", mousedown) | |
| //.on('mouseover', handleMouseOver) | |
| //.on('mouseout', handleMouseOut) | |
| .call(force.drag); | |
| const min = Math.min(...map1.values()); | |
| console.log(min); // 👉️ 3 | |
| const max = Math.max(...map1.values()); | |
| console.log(max); | |
| var myScale = d3.scale.linear() | |
| .domain([min, max]) | |
| .range([10, 20]); | |
| console.log(myScale(400)); // Output: 250 | |
| // var myColorScale = d3.scale.log() | |
| // .domain([min, max]) | |
| // .range([ 'skyblue', 'blue', 'darkblue']); | |
| /* console.log(myColorScale(87)); | |
| console.log(myColorScale(91)); | |
| console.log(myColorScale(91)); | |
| console.log(myColorScale(95)); | |
| console.log(myColorScale(419));*/ | |
| // add the nodes | |
| node.append("circle") | |
| .attr("r", function(d) { | |
| console.log(d.name); | |
| // Use the count of links for this node to get a scaled radius | |
| console.log("radius"+myScale(map1.get(d.name))) | |
| return myScale(map1.get(d.name)); | |
| }) | |
| .style("fill", function(d){ | |
| if(d.name == "Non-performance"){ | |
| return "gray"; | |
| }else{ | |
| return "blue"; | |
| } | |
| }) | |
| .style("stroke", "black") | |
| var text = svg2.append("g").selectAll("text") | |
| .data(force.nodes()) | |
| .enter().append("text") | |
| .attr("x", 8) | |
| .attr("y", ".31em") | |
| .text(function(d) { return d.name; }); | |
| var linktext = svg2.append("svg:g").selectAll("g.linklabelholder").data(force.links()); | |
| linktext.enter().append("g").attr("class", "linklabelholder") | |
| .append("text") | |
| .attr("class", "linklabel") | |
| .style("font-size", "13px") | |
| .attr("x", "50") | |
| .attr("y", "-20") | |
| .attr("text-anchor", "start") | |
| .style("fill","#000") | |
| .append("textPath") | |
| .attr("xlink:href",function(d,i) { return "#linkId_" + i;}) | |
| .text(function(d) { | |
| return d.value; | |
| }); | |
| // Use elliptical arc path segments to doubly-encode directionality. | |
| function tick() { | |
| path.attr("d", linkArc); | |
| // node.attr("transform", transform); | |
| text.attr("transform", transform); | |
| node | |
| .attr("transform", function(d) { | |
| return "translate(" + d.x + "," + d.y + ")"; }) | |
| path.attr("d", function(d) { | |
| // if(d.value !=0 ) { | |
| var x1 = d.source.x, | |
| y1 = d.source.y, | |
| x2 = d.target.x, | |
| y2 = d.target.y, | |
| dx = x2 - x1, | |
| dy = y2 - y1, | |
| dr = Math.sqrt(dx * dx + dy * dy), | |
| // Defaults for normal edge. | |
| drx = dr, | |
| dry = dr, | |
| xRotation = 5, // degrees | |
| largeArc = 0, // 1 or 0 | |
| sweep = 1; // 1 or 0 | |
| // Self edge. | |
| if (x1 === x2 && y1 === y2) { | |
| // Fiddle with this angle to get loop oriented. | |
| xRotation = -70; | |
| // Needs to be 1. | |
| largeArc = 1; | |
| // Change sweep to change orientation of loop. | |
| sweep = 1; | |
| // Make drx and dry different to get an ellipse | |
| // instead of a circle. | |
| drx = 30; | |
| dry = 15; | |
| // For whatever reason the arc collapses to a point if the beginning | |
| // and ending points of the arc are the same, so kludge it. | |
| x2 = x2 + 1; | |
| y2 = y2 + 1; | |
| } | |
| return "M" + x1 + "," + y1 + "A" + drx + "," + dry + " " + xRotation + "," + largeArc + "," + sweep + " " + x2 + "," + y2; | |
| //} | |
| }); | |
| } | |
| function linkArc(d) { | |
| var dx = d.target.x - d.source.x, | |
| dy = d.target.y - d.source.y, | |
| dr = Math.sqrt(dx * dx + dy * dy); | |
| return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y; | |
| } | |
| function transform(d) { | |
| return "translate(" + d.x + "," + d.y + ")"; | |
| } | |
| /* function mouseover() { | |
| const nodeName = d3.select(this).datum().name; | |
| console.log("Hovering over node:", nodeName); | |
| const table = d3.select("body").append("table"); | |
| // Add a header row | |
| const headerRow = table.append("tr"); | |
| headerRow.append("th").text("Id"); | |
| headerRow.append("th").text("Full Sentence"); | |
| headerRow.append("th").text("Component"); | |
| headerRow.append("th").text("cause/effect"); | |
| headerRow.append("th").text("Label level1"); | |
| headerRow.append("th").text("Label level2"); | |
| // Add a data row for the hovered node | |
| d3.json("ch.json", function(data) { | |
| var table = d3.select("table"); // select the existing table | |
| var tbody = table.append("tbody"); // create a tbody element | |
| // loop through each item in the data array | |
| for (var i = 0; i < data.length; i++) { | |
| if(nodeName == [data[i].Labellevel2]) { | |
| var tr = tbody.append("tr"); // create a table row for each item | |
| // append a table cell with the Id property | |
| tr.append("td").text(data[i].Id); | |
| tr.append("td").text([data[i].Fullsentence]); | |
| tr.append("td").text([data[i].Component]); | |
| tr.append("td").text([data[i].causeOrEffect]); | |
| tr.append("td").text([data[i].Labellevel1]); | |
| tr.append("td").text([data[i].Labellevel2]); | |
| } | |
| } | |
| }); | |
| } | |
| function mouseout() { | |
| d3.select("table").remove(); | |
| }*/ | |
| svg2.append("text") | |
| .attr("x", width/2 + 10) | |
| .attr("y", height - 30) | |
| .attr("text-anchor", "middle") | |
| .text(" Click on a node to get the detailed results") | |
| .style("font-weight", "bold") | |
| .style("font-family", "Times New Roman") | |
| .style("font-size", "16px") | |
| .style("opacity", 0) | |
| .transition() | |
| .duration(2000) | |
| .style("opacity", 1); | |
| function dragstarted(d) { | |
| if (!d3.event.active) simulation.alphaTarget(0.8).restart() | |
| d.fx = d.x; | |
| d.fy = d.y; | |
| } | |
| function dragged(d) { | |
| d.fx = d3.event.x; | |
| d.fy = d3.event.y; | |
| } | |
| node.on("dblclick", function() { | |
| // Code to execute when circle is double-clicked | |
| console.log("Circle was double-clicked!"); | |
| }); | |
| function mousedown(d) { | |
| d3.event.stopPropagation(); | |
| d3.select("table").remove(); | |
| var tableContainer = d3.select('.container'); | |
| tableContainer.remove(); | |
| var tableheader = d3.select('.headerRow'); | |
| tableheader.remove(); | |
| const nodeName = d.name; | |
| console.log("Hovering over node:", nodeName); | |
| var container = d3.select('body') | |
| .append('div') | |
| .attr('class', 'container') | |
| .style('height', '250px') | |
| .style('overflow', 'auto'); | |
| // Create the table element inside the container | |
| var table = container.append('table') | |
| .attr('class', 'table') | |
| .style('table-layout', 'fixed') | |
| d3.selectAll('.table td') | |
| .style('font-size', '12px'); | |
| // Add rows and cells to the ta | |
| // Add a header row | |
| const headerRow = table.append("tr"); | |
| headerRow.append("th").text("Id"); | |
| headerRow.append("th").text("Full Sentence"); | |
| headerRow.append("th").text("Component"); | |
| headerRow.append("th").text("cause/effect"); | |
| headerRow.append("th").text("Label level1"); | |
| headerRow.append("th").text("Label level2"); | |
| // Add a data row for the hovered node | |
| d3.json("ch.json", function(data) { | |
| var table = d3.select("table"); // select the existing table | |
| var tbody = table.append("tbody"); // create a tbody element | |
| // loop through each item in the data array | |
| for (var i = 0; i < data.length; i++) { | |
| if(nodeName == [data[i].Labellevel2]) { | |
| var tr = tbody.append("tr"); // create a table row for each item | |
| // append a table cell with the Id property | |
| tr.append("td").text(data[i].Id); | |
| tr.append("td").text([data[i].Fullsentence]); | |
| tr.append("td").text([data[i].Component]); | |
| tr.append("td").text([data[i].causeOrEffect]); | |
| tr.append("td").text([data[i].Labellevel1]); | |
| tr.append("td").text([data[i].Labellevel2]); | |
| } | |
| } | |
| }); | |
| } | |
| }); | |
| </script> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |