Object:

"+ "

"+d.data.name+"

"; if(!d.children && access.indexOf(d.data.name) in["Read","Write","Delete"]){ innerColumns = "

Access:

"+ "

"+d.data.name+"

"; } if(d.children && d.depth===0){ innerColumns = "

Bucket:

"+ "

"+d.data.name+"

"; } return "

"+"

"+ "

"+ innerColumns + "

"+ "

"; }) .style("left", (d3.event.pageX + 15) + "px") .style("top", (d3.event.pageY - 200) + "px"); }; let mouseout = () => { Tooltip.transition() .duration(duration) .style("opacity", 0); }; // Building svg let svg = selection .selectAll('svg') .data([data]) .enter() .append('svg') .attr("width", chartWidth) .attr("height", chartHeight) .style("cursor","move"); svg = svg.merge(svg); let g = svg.append("g") .attr("transform", `translate(${width / 2}, ${height / 2})`); let link = g.append("g") .attr("fill", "none") .attr("stroke", "#666") .attr("stroke-width", "1.5px") .selectAll("path") .data(links) .join("path"); let defs = g.append('svg:defs'); defs.append("svg:pattern") .attr("id", "image") .attr("width", 34) .attr("height", 34) .attr("x", -16) .attr("y", -16) .attr("patternUnits", "userSpaceOnUse") .attr("patternUnits", "userSpaceOnUse") .append("svg:image") .attr("xlink:href", "https://user-images.githubusercontent.com/18228016/68896905-56851200-0724-11ea-8a31-b5723aea30fa.png") .attr("width", 34) .attr("height",34) .attr("x", 0) .attr("y", 0); let node = g.append("g") .attr("class", "node") .style("cursor", "pointer") .selectAll("circle") .data(nodes) .join("circle") .attr("fill", d => { if(d.depth === 0) return "url(#image)"; if(d.children){ if(1 === d.depth){ previousColour = "#000000".replace(/0/g,function(){return (~~(Math.random()*16)).toString(16);}); d.data.color = previousColour; return previousColour; }else if(d.depth>1){ d.data.color = d.parent.data.color; return d.parent.data.color; } }else{ switch(d.data.name){ case "Read":return "#48d146"; case "Write":return "#33bbff"; case "Delete":return "#ff3332"; // default: return } } }) .attr("class",(d)=> (!d.children && access.indexOf(d.data.name) === -1)? "blink": null) .attr("stroke", d => (d.depth===0)?null:(!d.children)?"grey":"white") .attr("stroke-width", 2) .attr("r", d => (d.depth===0)?18:(!d.children)?6:12) .on("mouseover", mouseover) .on("mouseout", mouseout) .each(pulse) .call(drag(simulation)); simulation.on("tick", () => { link.attr("d", function(d) { let 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 + " 1 0,1 " + d.target.x + "," + 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); } chart.width = function (_) { return arguments.length ? ((width = _) , chart) : width; }; chart.height = function (_) { return arguments.length ? ((height = _) , chart) : height; }; chart.margin = function (_) { return arguments.length ? ((margin = _) , chart) : margin; }; return chart; }