d3 jsノードがウィンドウ外にある

Question

d3.jsを使用して50個のノードとそのリンクを視覚化すると、ノード内の一部がウィンドウ内に表示されません（画面外です） - ドラッグしない限り、 これは私のコードです。すべてのノードを読み込み時に表示させる方法はありますか？ ：次の行を追加することになってしまった

var width = window.innerWidth; 
var height = window.innerHeight - 100; 

var svg = d3.select("#sharedActivityGraph") 
    .append("svg") 
    .attr("width", width) 
    .attr("height", height); 

var simulation = d3.forceSimulation() 
    .force("link", d3.forceLink()) 
    .force("charge", d3.forceManyBody().strength(-600)) 
    .force("center", d3.forceCenter(width/2, height/2)); 


var links = svg.selectAll("foo") 
    .data(gSharedActivityGraphEdges) 
    .enter() 
    .append("line") 
    .style("stroke", "#ccc") 
    .style("stroke-width", function (e) { return e.width }); 

var color = d3.scaleOrdinal(d3.schemeCategory20); 

var node = svg.selectAll("foo") 
    .data(gSharedActivityGraphNodes) 
    .enter() 
    .append("g") 
    .call(d3.drag() 
     .on("start", dragstarted) 
     .on("drag", dragged) 
     .on("end", dragended)); 

node.on('mouseover', function (d) { 
     console.log(d); 
     SharedActivityShowInfo(d); 

     node.filter(function (d1) { return (d !== d1 
     && d1.adjacents.indexOf(d.id) == -1); 
     }).select("image").style("opacity", 0.2); 
     node.filter(function (d1) { return (d == d1 
     || d1.adjacents.indexOf(d.id) !== -1); 
     }).select("image").style("opacity", 1); 
    }) 
    .on('mouseout', function() { 
     SharedActivityHideInfo(); 
     node.select("image").style("opacity", 1); 
    }); 

var nodeCircle = node.append("circle") 
    .attr("r", function (d) { return 0.5 * Math.max(d.width, d.height) }) 
    .attr("stroke", "gray") 
    .attr("stroke-width", "2px") 
    .attr("fill", "white"); 

var nodeImage = node.append("image") 
     .attr("xlink:href", function (d) { return d.image }) 
     .attr("height", function (d) { return d.height + "" }) 
     .attr("width", function (d) { return d.width + "" }) 
     .attr("x", function (d) {return -0.5 * d.width }) 
     .attr("y", function (d) {return -0.5 * d.height }) 
     .attr("clip-path", function (d) { return "circle(" + (0.48 * Math.max(d.width, d.height)) + "px)"}); 

simulation.nodes(gSharedActivityGraphNodes); 
simulation 
    .force("link") 
    .links(gSharedActivityGraphEdges); 

simulation.on("tick", function() { 
    links.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; 
     }) 
    node.attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"}); 
}); 

function dragstarted(d) { 
    if (!d3.event.active) simulation.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) simulation.alphaTarget(0); 
    d.fx = null; 
    d.fy = null; 
} 

Answer 1

：行の下

node.attr("cx", function(d) { return d.x = Math.max(d.width, Math.min(width - d.width, d.x)); }) 
     .attr("cy", function(d) { return d.y = Math.max(d.height, Math.min(height - heightDelta - d.height, d.y)); }); 

：refため

node.attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"}); 

@TomShanley感謝！