0

I am trying to implement a D3 force network via a JavaScript action. I have an HTML document which implements it. I put all JavaScript from the document into JavaScript action. As the result, the initial diagram seems paint, but no automation is executed. I am also getting the below execution error Variable undefined in strict mode ReferenceError: Variable undefined in strict mode    at Anonymous function (http://localhost:8080/jsactions.js?637351587097162680:464:19)    at o (http://localhost:8080/jsactions.js?637351587097162680:494:2514)    at Anonymous function (http://localhost:8080/jsactions.js?637351587097162680:496:15101)    at Y (http://localhost:8080/jsactions.js?637351587097162680:494:4496)    at Co.each (http://localhost:8080/jsactions.js?637351587097162680:496:15071)    at Co.attr (http://localhost:8080/jsactions.js?637351587097162680:496:11903)    at Anonymous function (http://localhost:8080/jsactions.js?637351587097162680:462:15)    at t (http://localhost:8080/jsactions.js?637351587097162680:494:1551)    at l.tick (http://localhost:8080/jsactions.js?637351587097162680:497:21275)    at Rn (http://localhost:8080/jsactions.js?637351587097162680:494:11897) You can access the application here https://d3forcenetwork-sandbox.mxapps.io/ . Click "Show force network" to see how it (does not) work. Can somebody guide me to where should I look for surprises? Below is the body of JavaScript action var w = 1000; var h = 600; var linkDistance=200; var colors = d3.scale.category10(); var dataset = { nodes: [ {name: "Adam", size: 15, "color":"red", "url" : "https://www.google.com"}, {name: "Bob", size: 10, "color":"grey", "url" : "https://www.google.com"}, {name: "Carrie", size: 15, "color":"green", "url" : "https://www.google.com"}, {name: "Donovan", size: 20, "color":"black", "url" : "https://www.google.com"}, {name: "Edward", size: 15, "color":"purple", "url" : "https://www.google.com"}, {name: "Felicity", size: 5, "color":"yellow", "url" : "https://www.google.com"}, {name: "George", size: 10, "color":"blue", "url" : "https://www.google.com"}, {name: "Hannah", size: 15, "color":"brown", "url" : "https://www.google.com"}, {name: "Iris", size: 20, "color":"magenta", "url" : "https://www.google.com"}, {name: "Jerry", size: 15, "color":"red", "url" : "https://www.google.com"} ], edges: [ {source: 0, target: 1, name: "Fancy label 1", "url" : "https://www.google.com"}, {source: 0, target: 2, name: "Fancy label 2", "url" : "https://www.google.com"}, {source: 0, target: 3, name: "Fancy label 3", "url" : "https://www.google.com"}, {source: 0, target: 4, name: "Fancy label 4", "url" : "https://www.google.com"}, {source: 1, target: 5, name: "Fancy label 5", "url" : "https://www.google.com"}, {source: 2, target: 5, name: "Fancy label 6", "url" : "https://www.google.com"}, {source: 2, target: 5, name: "Fancy label 7", "url" : "https://www.google.com"}, {source: 3, target: 4, name: "Fancy label 8", "url" : "https://www.google.com"}, {source: 5, target: 8, name: "Fancy label 9", "url" : "https://www.google.com"}, {source: 5, target: 9, name: "Fancy label 10", "url" : "https://www.google.com"}, {source: 6, target: 7, name: "Fancy label 11", "url" : "https://www.google.com"}, {source: 7, target: 8, name: "Fancy label 12", "url" : "https://www.google.com"}, {source: 8, target: 9, name: "Fancy label 13", "url" : "https://www.google.com"} ] }; var svg = d3.select(".forceNetwork").append("svg").attr({"width":w,"height":h}); var force = d3.layout.force() .nodes(dataset.nodes) .links(dataset.edges) .size([w,h]) .linkDistance([linkDistance]) .charge([-500]) .theta(0.1) .gravity(0.05) .start(); var edges = svg.selectAll("line") .data(dataset.edges) .enter() .append("line") .attr("id",function(d,i) {return 'edge'+i}) .attr('marker-end','url(#arrowhead)') .style("stroke","#ccc") .style("pointer-events", "none"); var nodes = svg.selectAll("circle") .data(dataset.nodes) .enter() .append("a") .attr("xlink:href", function(d){return d.url;}) .append("circle") .attr({"r":function(d){return d.size;}}) .style("fill",function(d,i){return d.color;}) .call(force.drag) var nodelabels = svg.selectAll(".nodelabel") .data(dataset.nodes) .enter() .append("text") .attr({"x":function(d){return d.x;}, "y":function(d){return d.y;}, "class":"nodelabel", "stroke":"black"}) .text(function(d){return d.name;}); var edgepaths = svg.selectAll(".edgepath") .data(dataset.edges) .enter() .append('path') .attr({'d': function(d) {return 'M '+d.source.x+' '+d.source.y+' L '+ d.target.x +' '+d.target.y}, 'class':'edgepath', 'fill-opacity':0, 'stroke-opacity':0, 'fill':'blue', 'stroke':'red', 'id':function(d,i) {return 'edgepath'+i}}) .style("pointer-events", "none"); var edgelabels = svg.selectAll(".edgelabel") .data(dataset.edges) .enter() .append('text') .style("pointer-events", "none") .attr({'class':'edgelabel', 'id':function(d,i){return 'edgelabel'+i}, 'dx':80, 'dy':0, 'font-size':10, 'fill':'#aaa'}); edgelabels.append('textPath') .attr('xlink:href',function(d,i) {return '#edgepath'+i}) .style("pointer-events", "none") .text(function(d,i){return d.name;}); svg.append('defs').append('marker') .attr({'id':'arrowhead', 'viewBox':'-0 -5 10 10', 'refX':25, 'refY':0, //'markerUnits':'strokeWidth', 'orient':'auto', 'markerWidth':10, 'markerHeight':10, 'xoverflow':'visible'}) .append('svg:path') .attr('d', 'M 0,-5 L 10 ,0 L 0,5') .attr('fill', '#ccc') .attr('stroke','#ccc'); force.on("tick", function(){ edges.attr({"x1": function(d){return d.source.x;}, "y1": function(d){return d.source.y;}, "x2": function(d){return d.target.x;}, "y2": function(d){return d.target.y;} }); nodes.attr({"cx":function(d){return d.x;}, "cy":function(d){return d.y;} }); nodelabels.attr("x", function(d) { return d.x; }) .attr("y", function(d) { return d.y; }); edgepaths.attr('d', function(d) { var path='M '+d.source.x+' '+d.source.y+' L '+ d.target.x +' '+d.target.y; return path}); edgelabels.attr('transform',function(d,i){ if (d.target.x<d.source.x){ bbox = this.getBBox(); rx = bbox.x+bbox.width/2; ry = bbox.y+bbox.height/2; return 'rotate(180 '+rx+' '+ry+')'; } else { return 'rotate(0)'; } }); });  

asked 2020-09-08

1 answers