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)); });

线下方：

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

@TomShanley感谢ref！

d3 js节点不在窗口内

1 个答案: