chart = { function getSelectVarOptions(selectName){ var selectList = document.querySelector("#"+selectName).options; var labels = [] for(var i = 0;i < selectList.length; i++){ labels.push(selectList[i].label); } return labels; } var colLabel = getSelectVarOptions(objvar); var rowLabel = getSelectVarOptions(distvar); var dataRaw = data; if(objvar == "Relacion" || distvar == "Relacion" || objvar == "Habilidades" || distvar == "Habilidades" || objvar == "Competencias" || distvar == "Competencias" //|| objvar == "CentroEducativo" || distvar == "CentroEducativo" ){ dataRaw = data.flatMap(row => { var myMap = new Map(); var numVars = 0; if(objvar == "Relacion" || distvar == "Relacion"){ if(row.Relacion != ""){ myMap.set("Relacion",row.Relacion.split(',')); numVars ++; } } if(objvar == "Habilidades" || distvar == "Habilidades"){ if(row.Habilidades != "") { myMap.set("Habilidades",row.Habilidades.split(',')); numVars ++; } } if(objvar == "Competencias" || distvar == "Competencias"){ if(row.Competencias != "") { myMap.set("Competencias",row.Competencias.split(',')); numVars ++; } } //else // if(objvar == "CentroEducativo" || distvar == "CentroEducativo"){ //if(row.CentroEducativo != "") //{ // myMap.set("CentroEducativo",row.CentroEducativo.split(',')); // numVars ++; // } if(numVars == 0){ return row; } else if(numVars == 1) { var keys = myMap.keys(); var var1 = keys.next().value; var arrayValues = myMap.get(var1); var newRows = []; for(var i = 0; i < arrayValues.length; i++) { var value = arrayValues[i]; var cloneRow = Object.assign({}, row); if(var1 == "Relacion") cloneRow.Relacion = value; else if(var1 == "Habilidades") cloneRow.Habilidades = value; else if(var1 == "Competencias") cloneRow.Competencias = value; // else if(var1 == "CentroEducativo") // cloneRow.CentroEducativo = value; newRows.push(cloneRow) } return newRows; } else //if(numVars == 2) { var keys = myMap.keys(); var var1 = keys.next().value; var var2 = keys.next().value; var arrayVar1 = myMap.get(var1); var arrayVar2 = myMap.get(var2); var newRows = []; for(var i = 0; i < arrayVar1.length; i++) { var valueVar1 = arrayVar1[i]; for(var j = 0; j < arrayVar2.length; j++) { var valueVar2 = arrayVar2[j]; var cloneRow = Object.assign({}, row); if(var1 == "Relacion") cloneRow.Relacion = valueVar1; else if(var1 == "Habilidades") cloneRow.Habilidades = valueVar1; else if(var1 == "Competencias") cloneRow.Competencias = valueVar1; // else if(var1 == "CentroEducativo") // cloneRow.CentroEducativo = valueVar1; if(var2 == "Relacion") cloneRow.Relacion = valueVar2; else if(var2 == "Habilidades") cloneRow.Habilidades = valueVar2; else if(var2 == "Competencias") cloneRow.Competencias = valueVar2; // else if(var2 == "CentroEducativo") //cloneRow.CentroEducativo = valueVar2; newRows.push(cloneRow) } } return newRows; } }); } var allHistories = new Map() var dataFiltered = d3.entries(dataRaw) .filter((value, index, arr) => { //Filter the data when the objvar or distvar have invalid values if(value.key == "columns") return false; if(objvar == "departamento" || distvar == "departamento"){ if(value.value.departamento == "") return false; }else if(objvar == "colegio" || distvar == "colegio"){ if(value.value.colegio == "") return false; }else if(objvar == "produjo" || distvar == "produjo"){ if(value.value.produjo == "") return false; }else if(objvar == "enfoque" || distvar == "enfoque"){ if(value.value.enfoque == "") return false; }else if(objvar == "intencion" || distvar == "intencion"){ if(value.value.intencion == "") return false; }else if(objvar == "aprende" || distvar == "aprende"){ if(value.value.aprende == "") return false; }else if(objvar == "factor" || distvar == "factor"){ if(value.value.factor == "") return false; }else if(objvar == "determinantes" || distvar == "determinantes"){ if(value.value.determinantes == "") return false; }else if(objvar == "foco" || distvar == "foco"){ if(value.value.foco == "") return false; }else if(objvar == "papel" || distvar == "papel"){ if(value.value.papel == "") return false; }else if(objvar == "animo" || distvar == "animo"){ if(value.value.animo == "") return false; }else if(objvar == "aprendi" || distvar == "aprendi"){ if(value.value.aprendi == "") return false; }else if(objvar == "influencias" || distvar == "influencias"){ if(value.value.influencias == "") return false; }else if(objvar == "sensacion" || distvar == "sensacion"){ if(value.value.sensacion == "") return false; }else if(objvar == "sucede" || distvar == "sucede"){ if(value.value.sucede == "") return false; }else if(objvar == "relacionada" || distvar == "relacionada"){ if(value.value.relacionada == "") return false; }else if(objvar == "tiempo" || distvar == "tiempo"){ if(value.value.tiempo == "") return false; }else if(objvar == "intituciontipo" || distvar == "intituciontipo"){ if(value.value.intituciontipo == "") return false; }else if(objvar == "prescolar" || distvar == "prescolar"){ if(value.value.prescolar == "") return false; }else if(objvar == "genero" || distvar == "genero"){ if(value.value.genero == "") return false; }else if(objvar == "edad" || distvar == "edad"){ if(value.value.edad == "") return false; }else if(objvar == "nivel" || distvar == "nivel"){ if(value.value.nivel == "") return false; } //Filter the data with the selected values from the form for(var i = 0; i < UserInput.length; i++){ var ui = UserInput[i]; var varName = ui.substring(0,ui.indexOf("_")); var varValue = ui.substring(ui.indexOf("_")+1,ui.length); if(value.value[varName]+"" == varValue) return false; else if(varName == "Relacion" || varName == "Habilidades"||varName == "Competencias") { if(value.value[varName].includes(varValue)){ return false; } } } return true; }) .map(d => { var history = d.value; if(!allHistories.has(history.marca)) allHistories.set(history.marca,history) return history; }); var dataGrouped = d3.nest() .key(d => { return d[objvar]+"-"+d[distvar]; }) .key(d => { return d.marca; }) .rollup(v => { return v.length; }) .entries(dataFiltered) .map(v => { var k1 = v.key.substring(0,v.key.indexOf("-")); var k2 = v.key.substring(v.key.indexOf("-")+1,v.length); var col = -1,row = -1; for(var i = 0; i < colLabel.length; i++){ if(colLabel[i] == k1){ col = i; break; } } for(var i = 0; i < rowLabel.length; i++){ if(rowLabel[i] == k2){ row = i; break; } } return{ colName : k1, rowName : k2, values : v.values, col : col, row : row, value : v.values.length } }) var margin = { top: 30, right: 20, bottom: 10, left: 300}, cellSize=25; var col_number=colLabel.length; var row_number=rowLabel.length; var max = 0, min = -1; for(var i = 0; i < dataGrouped.length; i++){ if(dataGrouped[i].value > max){ max = dataGrouped[i].value } if(min == -1){ min = dataGrouped[i].value; } else if(dataGrouped[i].value < min){ min = dataGrouped[i].value; } } //modies var width = cellSize*70, height = cellSize*70, legendElementWidth = cellSize*1.7, colorBuckets = 9, colors = d3.schemeBlues[9] var colorScale = d3.scaleQuantile() .domain([ min, max]) .range(colors); var svg = d3.create("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) // .attr("viewBox", [0, 0, 1060, 480]) // .attr("viewBox", [0, 0, 3000, 480]) .attr("overflow","auto"); var objVarHtml = document.querySelector("#objvar") var distVarHtml = document.querySelector("#distvar") svg.append("text") .attr("class", "mono2") .attr('x',0) .attr('y',280) .text(objVarHtml.options[objVarHtml.selectedIndex].text); svg.append("text") .attr("class", "mono2") .attr('x',0) .attr('y',290) .text("X"); svg.append("text") .attr("class", "mono2") .attr('x',0) .attr('y',300) .text(distVarHtml.options[distVarHtml.selectedIndex].text); var node = svg .append("g") .attr("transform", "translate(" + margin.left + "," + (margin.top+300) + ")"); var rowSortOrder=false; var colSortOrder=false; var rowLabels = node.append("g") .selectAll(".rowLabelg") .data(rowLabel) .enter() .append("text") .text((d) => { return d; }) .attr("x", 0) .attr("y",(d, i) => { return i * cellSize; }) .style("text-anchor", "end") .attr("transform", "translate(-6," + cellSize / 1.5 + ")") .attr("class",(d,i) => { return "rowLabel mono r"+i;} ) .on("mouseover",(d,e,f) => {d3.select(f[e]).classed("text-hover",true);}) .on("mouseout" ,(d,e,f) => {d3.select(f[e]).classed("text-hover",false);}) .on("click",(d,i) => {rowSortOrder=!rowSortOrder; sortbylabel("r",i,rowSortOrder);}); var colLabels = node.append("g") .selectAll(".colLabelg") .data(colLabel) .enter() .append("text") .text((d) => { return d; }) .attr("x", 0) .attr("y",(d, i) => { return i * cellSize; }) .style("text-anchor", "left") .attr("transform", "translate("+cellSize/2 + ",-6) rotate (-90)") .attr("class",(d,i) => { return "colLabel mono c"+i;} ) .on("mouseover",(d,e,f) => {d3.select(f[e]).classed("text-hover",true);}) .on("mouseout" ,(d,e,f) => {d3.select(f[e]).classed("text-hover",false);}) .on("click",(d,i) => {colSortOrder=!colSortOrder; sortbylabel("c",i,colSortOrder);}); var heatMap = node.append("g").attr("class","g3")//mapa .selectAll(".cellg") .data(dataGrouped,(d) => {return d.row+":"+d.col;}) .enter() .append("rect") .attr("x",(d) => { return (d.col) * cellSize; }) .attr("y",(d) => { return (d.row) * cellSize; }) .attr("class",(d) => {return "cell cell-border cr"+(d.row-1)+" cc"+(d.col-1);}) .attr("width", cellSize) .attr("height", cellSize) .style("fill",(d) => { return colorScale(d.value); }) .on("mouseover",(d,e,f) => { //highlight text d3.select(f[e]).classed("cell-hover",true); d3.selectAll(".rowLabel").classed("text-highlight",(r,ri) => { return ri==(d.row);}); d3.selectAll(".colLabel").classed("text-highlight",(c,ci) => { return ci==(d.col);}); //Update the tooltip value d3.select("#tooltip") .text(rowLabel[d.row]+" - "+colLabel[d.col]+" - Historias: "+d.value); //Show the tooltip d3.select("#tooltip").classed("hidden", false); }) .on("mouseout",(d,e,f) => { d3.select(f[e]).classed("cell-hover",false); d3.selectAll(".rowLabel").classed("text-highlight",false); d3.selectAll(".colLabel").classed("text-highlight",false); d3.select("#tooltip").classed("hidden", true); }); svg.append("text") .attr('id', "histories") .attr("class", "mono2") .attr('x',0) .attr('y', (cellSize*rowLabel.length)+cellSize/2+cellSize*3+300) .text("Historias seleccionadas: 0"); node.append("text") .attr('id', "tooltip") .attr("class", "mono2") .attr('x',(d, i) => { return legendElementWidth * i; }) .attr('y', (cellSize*rowLabel.length)+cellSize/2); var dif = max - min; var jump = dif / colorBuckets; var legValues = new Array(colorBuckets); for(var i = 0; i < colorBuckets; i++){ legValues[i] = Math.floor((i * jump)+min); } var legend = node.selectAll(".legend") .data(legValues) .enter().append("g") .attr("class", "legend"); legend.append("rect") .attr("x",(d, i) => { return legendElementWidth * i; }) .attr("y", (cellSize*rowLabel.length)+cellSize) .attr("width", legendElementWidth) .attr("height", cellSize) .style("fill",(d, i) => { return colors[i]; }); legend.append("text") .attr("class", "mono2") .text((d) => { return d; }) .attr("width", legendElementWidth) .attr("x", (d, i) => { return legendElementWidth * i; }) .attr("y", (cellSize*rowLabel.length)+cellSize*2.5); // Change ordering of cells function sortbylabel(rORc,i,sortOrder){ var t = node.transition().duration(3000); var log2r; if(rORc=="r") log2r = new Array(rowLabels.length); else log2r = new Array(colLabels.length); var sorted; // sorted is zero-based index d3.selectAll(".c"+rORc+(i-1)) .filter((ce) => { if(rORc=="r") log2r[ce.col] = ce.value; else log2r[ce.row] = ce.value; }); for(var i = 0; i < log2r.length; i++){ if(!log2r[i]) log2r[i] = 0; } if(rORc=="r"){ sorted=d3.range(col_number).sort((a,b) => { if(sortOrder){ return log2r[b]-log2r[a];}else{ return log2r[a]-log2r[b];}}); t.selectAll(".cell") .attr("x",(d) => { return sorted.indexOf(d.col) * cellSize; }); t.selectAll(".colLabel") .attr("y",(d, i) => { return sorted.indexOf(i) * cellSize; }); }else{ // sort log2ratio of a contrast sorted=d3.range(row_number).sort((a,b) => {if(sortOrder){ return log2r[b]-log2r[a];}else{ return log2r[a]-log2r[b];}}); t.selectAll(".cell") .attr("y",(d) => { return sorted.indexOf(d.row) * cellSize; }); t.selectAll(".rowLabel") .attr("y",(d, i) => { return sorted.indexOf(i) * cellSize; }); } } var preseSelectedCells = []; var selectedCells = new Map(); var selectedHistories = new Map(); var numSelectedHistories = 0; var sa=node.select(".g3") .on("mousedown", function() { if( !d3.event.altKey) { //console.log("clean all") cleanSelectedCells() d3.selectAll(".cell-selected").classed("cell-selected",false); d3.selectAll(".rowLabel").classed("text-selected",false); d3.selectAll(".colLabel").classed("text-selected",false); } var p = d3.mouse(this); sa.append("rect") .attr("x",Math.round(p[0])) .attr("y",Math.round(p[1])) .attr("rx",0) .attr("ry",0) .attr("class","selection") .attr("width",1) .attr("height",1) }) .on("mousemove", function() { var s = sa.select("rect.selection"); if(!s.empty()) { var p = d3.mouse(this), d = { x : parseInt(s.attr("x"), 10), y : parseInt(s.attr("y"), 10), width : parseInt(s.attr("width"), 10), height : parseInt(s.attr("height"), 10) }, move = { x : p[0] - d.x, y : p[1] - d.y } ; if(move.x < 1 || (move.x*2= d.x && (this.x.baseVal.value)<=d.x+d.width && (this.y.baseVal.value)+cellSize >= d.y && (this.y.baseVal.value)<=d.y+d.height ) { //console.log(cell_d)//Hermes: NEW SELECTED CELLS addPreSelectedCell(cell_d); d3.select(this) .classed("cell-selection", true) .classed("cell-selected", true); d3.select(".r"+(cell_d.row)) .classed("text-selection",true) .classed("text-selected",true); d3.select(".c"+(cell_d.col)) .classed("text-selection",true) .classed("text-selected",true); } }); } }) .on("mouseup", function() { //console.log("selection created") movePreCellsToSelected(); drawBarAndGraphChart(); // remove selection frame sa.selectAll("rect.selection").remove(); d3.selectAll('.cell-selection').classed("cell-selection", false); d3.selectAll(".text-selection").classed("text-selection",false); }); function movePreCellsToSelected(){ //console.log(preseSelectedCells) for (var i = 0; i < preseSelectedCells.length; i++) { //console.log(preseSelectedCells[i]) addSelectedCell(preseSelectedCells[i]); } } function addPreSelectedCell(cell){ preseSelectedCells.push(cell); } function addSelectedCell(cell){ if(!selectedCells.has(cell.colName + "-"+ cell.rowName)){ selectedCells.set(cell.colName + "-"+ cell.rowName,cell); //console.log(cell.colName + "-"+ cell.rowName) var cellHistories = cell.values //console.log(cellHistories) for(var i = 0; i < cellHistories.length; i++ ){ if(!selectedHistories.has(cellHistories[i].key)){ var history = allHistories.get(cellHistories[i].key) selectedHistories.set(history.marca,history) } } //Update the histories number text numSelectedHistories += cellHistories.length d3.select("#histories") .text("Historias seleccionadas: "+numSelectedHistories); } } function cleanPreSelectedCells(){ preseSelectedCells = [] } function cleanSelectedCells(){ preseSelectedCells = [] selectedCells.clear() selectedHistories.clear() numSelectedHistories = 0; d3.select("#histories") .text("Historias seleccionadas: "+numSelectedHistories); } function drawBarAndGraphChart() { //console.log("filter...") //console.log(selectedCells) //console.log(selectedHistories) var dataRefiltered = d3.entries(dataFiltered) .filter((value, index, arr) => { if(selectedCells.size == 0) return true if(selectedCells.has(value.value[objvar]+"-"+value.value[distvar])) return true return false }) .map(d => {return d.value;}) //console.log(dataFiltered) //console.log(dataRefiltered) var dataBar = d3.nest() .key(d => { return d[objvar]; }) .rollup(v => { return v.length; }) .entries(dataRefiltered) setDataBar(dataBar) var dataGraph = [] for (let iterator = selectedHistories.values(), r; !(r = iterator.next()).done; ) { dataGraph.push({marca:r.value.marca, tono: r.value.sensacion, text: r.value.text, titulo: "", }); } setDataGraph(dataGraph) //console.log(dataGraph) //console.log(dataBar) } let gBar; let container; function setDataBar(theDataBar) { if(gBar) gBar.selectAll("*").remove(); gBar = svg.append("g") .attr("transform", `translate(${margin.left},${margin.top+rowLabel.length*cellSize+cellSize*4+300})`) let barSize = gBar.append("text") .attr("class", "mono2"); const x = d3.scaleLinear() .domain([0, d3.max(theDataBar, d => d.value)]) .range([0, 340]); const y = d3.scaleBand() .range([colLabel.length*20, 0]) .domain(colLabel); gBar.append("g") .attr("class", "x axis") .attr("transform", "translate(0,"+colLabel.length*20+")") .call(d3.axisBottom(x) .ticks(10) .tickSizeInner([-colLabel.length*20])); gBar.append("g") .attr("class", "y axis") .call(d3.axisLeft(y)); gBar.selectAll(".bar") .data(theDataBar) .enter().append("rect") .attr("class", "bar") .attr("x", 0) .attr("height", 15) .attr("y", d => { return y(d.key); }) .attr("width", d => { return x(d.value); }) .attr("fill", d => { return "#1964d4"; }) .on("mousemove", d => { barSize .attr("x", x(d.value)) .attr("y", y(d.key)+10) .style("display", "inline-block") .html("" + (d.value)); }) .on("mouseout", d => { barSize.style("display", "none");}); } function setDataGraph(theDataGraph){ var flattedNodes = theDataGraph.flatMap(history => { var words; if(textFrom == "titulo"){ if(history.titulo.trim() == "") words = ""; else words = history.titulo; } else words = history.text+(history.titulo.trim().length>0?" "+history.titulo:""); var wordsArr = words.split(" ") wordsArr = wordsArr.map(word => { return {word: word, tono: history.tono} }) return wordsArr; }).filter(v => {return v.word != "";}); flattedNodes = d3.nest() .key(d => { return d.word+"-"+d.tono; }) .rollup(v => { return v.length; }) .entries(flattedNodes) .map(v => { var word = v.key.substring(0,v.key.indexOf("-")); var tono = v.key.substring(v.key.indexOf("-")+1,v.length); return {word:word,tono:tono,count:v.value} }) var allnodes = d3.nest() .key(d => d.word) .key(d => d.tono) .rollup(v => { return d3.sum(v, (d) => {return d.count;}); }) .entries(flattedNodes) .map(v => { var word = v.key; var countTotal = 0; var maxTonoCount = 0; var maxTonoValue = ""; var tonos = v.values; for(var i = 0; i < tonos.length; i++){ var tono = tonos[i]; countTotal += tono.value; if(maxTonoValue == "" || maxTonoCount { return d3.descending(x.countTotal, y.countTotal); }) var firstNNodes = allnodes.slice(0, topNodesToGraph); var mapNNodes = new Map(); firstNNodes.forEach(n => {mapNNodes.set(n.id,n);}); const process = (one, two) => {if(one != two){return {source:one, target:two};} else{return {source:"",target:""}}}; var flattedLinks = theDataGraph.flatMap(history => { var words = history.text+(history.titulo.length>0?" "+history.titulo:""); var wordsArr = words.split(" ") wordsArr = wordsArr.filter(word => {return mapNNodes.has(word);}) let output = wordsArr.reduce((result, one) => result.concat(wordsArr.map(two => process(one, two))), []); return output }); flattedLinks = flattedLinks.filter(link => {return link.source != "";}) flattedLinks = d3.nest() .key(d => { return d.source+"-"+d.target; }) .rollup(v => { return v.length; }) .entries(flattedLinks) .map(v => { var source = v.key.substring(0,v.key.indexOf("-")); var target = v.key.substring(v.key.indexOf("-")+1,v.length); return {source:source,target:target,weight:v.value} }) .sort((x, y) => { return d3.descending(x.weight, y.weight); }) if(container) container.selectAll("*").remove(); container = svg.append("g") .attr("transform", `translate(0,${margin.top+rowLabel.length*cellSize+colLabel.length*cellSize+350})`) var width = 800; var height = 600; var colors = d3.schemeSet1; var tonoColor = new Map() var Emoc =d3.nest().key(d=>d.sensacion) .entries(data) .map(val => val.key); for (let i = 0; i < Emoc.length; i++) { tonoColor.set(Emoc[i],colors[i+2]) } var graph = {nodes : firstNNodes, links: flattedLinks} var label = { 'nodes': [], 'links': [] }; graph.nodes.forEach(function(d, i) { label.nodes.push({node: d}); label.nodes.push({node: d}); label.links.push({ source: i * 2, target: i * 2 + 1 }); }); var labelLayout = d3.forceSimulation(label.nodes) .force("charge", d3.forceManyBody().strength(-50)) .force("link", d3.forceLink(label.links).distance(0).strength(2)); var graphLayout = d3.forceSimulation(graph.nodes) .force("charge", d3.forceManyBody().strength(-3000)) .force("center", d3.forceCenter(width / 2, height / 2)) .force("x", d3.forceX(width / 2).strength(1)) .force("y", d3.forceY(height / 2).strength(1)) .force("link", d3.forceLink(graph.links).id(function(d) {return d.id; }).distance(50).strength(1)) .on("tick", ticked); var adjlist = []; graph.links.forEach(function(d) { adjlist[d.source.index + "-" + d.target.index] = true; adjlist[d.target.index + "-" + d.source.index] = true; }); function neigh(a, b) { return a == b || adjlist[a + "-" + b]; } var link = container.append("g").attr("class", "links") .selectAll("line") .data(graph.links) .enter() .append("line") .attr("stroke", "#aaa") .attr("stroke-width", (d) => { if(d.weight >= 1000) return 10 else if(d.weight < 1000 && d.weight >= 100) return 5 else if(d.weight < 100 && d.weight >= 10) return 2 else return 1 }); var node = container.append("g").attr("class", "nodes") .selectAll("g") .data(graph.nodes) .enter() .append("circle") .attr("r", (d) => { if(d.countTotal >= 1000) return (d.countTotal/1000)*100 else if(d.countTotal < 1000 && d.countTotal >= 100) return d.countTotal/100 *10 else if(d.countTotal < 100 && d.countTotal >= 10) return d.countTotal/10 + 10 else return d.countTotal+10 }) .attr("fill", function(d) {return tonoColor.get(d.maxTono); }) container.append("text") .attr('id', "nodeinfo") .attr("class", "mono2") .attr('x',0) .attr('y',200); function focusNode(d) { var index = d3.select(d3.event.target).datum().index; node.style("opacity", function(o) { return neigh(index, o.index) ? 1 : 0.1; }); labelNode.attr("display", function(o) { return neigh(index, o.node.index) ? "block": "none"; }); link.style("opacity", function(o) { return o.source.index == index || o.target.index == index ? 1 : 0.1; }); d3.select("#nodeinfo") .text("Palabra: "+d.id+" - Cantidad: "+d.countTotal); } function unfocusNode() { d3.select("#nodeinfo") .text(""); labelNode.attr("display", "block"); node.style("opacity", 1); link.style("opacity", 1); } function focusLink(d) { d3.select("#nodeinfo").text("Link: "+d.source.id+" - "+d.target.id+" (Weigth:"+d.weight+")"); } function unfocusLink() { d3.select("#nodeinfo").text(""); } node.on("mouseover", focusNode).on("mouseout", unfocusNode); link.on("mouseover", focusLink).on("mouseout", unfocusLink); node.call( d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ); var labelNode = container.append("g").attr("class", "labelNodes") .selectAll("text") .data(label.nodes) .enter() .append("text") .text(function(d, i) { return i % 2 == 0 ? "" : d.node.id; }) .style("fill", "black") .style("font-family", "Arial") .style("font-size", 11) .style("pointer-events", "none"); // to prevent mouseover/drag capture function ticked() { node.call(updateNode); link.call(updateLink); labelLayout.alphaTarget(0.3).restart(); labelNode.each(function(d, i) { if(i % 2 == 0) { d.x = d.node.x; d.y = d.node.y; } else { var b = this.getBBox(); var diffX = d.x - d.node.x; var diffY = d.y - d.node.y; var dist = Math.sqrt(diffX * diffX + diffY * diffY); var shiftX = b.width * (diffX - dist) / (dist * 2); shiftX = Math.max(-b.width, Math.min(0, shiftX)); var shiftY = 16; this.setAttribute("transform", "translate(" + shiftX + "," + shiftY + ")"); } }); labelNode.call(updateNode); } function fixna(x) { if (isFinite(x)) return x; return 0; } function updateLink(link) { link.attr("x1", function(d) { return fixna(d.source.x); }) .attr("y1", function(d) { return fixna(d.source.y); }) .attr("x2", function(d) { return fixna(d.target.x); }) .attr("y2", function(d) { return fixna(d.target.y); }); } function updateNode(node) { node.attr("transform", function(d) { return "translate(" + fixna(d.x) + "," + fixna(d.y) + ")"; }); } function dragstarted(d) { d3.event.sourceEvent.stopPropagation(); if (!d3.event.active) graphLayout.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) graphLayout.alphaTarget(0); d.fx = null; d.fy = null; } var legValues = new Array(Emoc.length); for (let i = 0; i < Emoc.length; i++) { legValues.push(Emoc[i]) } var legend = container.selectAll(".legend") .data(legValues) .enter().append("g") .attr("class", "legend"); legend.append("rect") .attr("x",(d, i) => { return legendElementWidth*1.7 * i; }) .attr("y", 550) .attr("width", legendElementWidth*1.7) .attr("height", cellSize) .style("fill",(d, i) => { if(d) return tonoColor.get(d); else return d3.rgb(255,255,255)}); legend.append("text") .attr("class", "mono2") .text((d) => { return d; }) .attr("width", legendElementWidth*1.5) .attr("x", (d, i) => { return legendElementWidth*1.7 * i; }) .attr("y", 590); } drawBarAndGraphChart() return svg.node(); }