D3.js網絡圖，使用力導向布局和節點矩形

Question

我正在嘗試修改Mike的“ 力導向圖”示例，以使用矩形而不是圓形作為節點。 另外，我想要矩形內的文本。

我有正確顯示文本的矩形，但是它們未附加在鏈接上，並且不會移動。

這是一個codepen鏈接： http ://codepen.io/anon/pen/gpgWaz

var width = 960,
    height = 500;

var color = d3.scale.category20();

var force = d3.layout.force()
    .charge(-120)
    .linkDistance(30)
    .size([width, height]);

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

force
    .nodes(graph.nodes)
    .links(graph.links)
    .start();

var link = svg.selectAll(".link")
    .data(graph.links)
    .enter().append("line")
    .attr("class", "link")
    .style("stroke-width", function(d) {
        return Math.sqrt(d.value);
    });

var node = svg.selectAll(".node")
    .data(graph.nodes)
    .enter()
    .append("g")
    .attr("transform", function(d) {
        return "translate(" + d.x + "," + d.y + ")";
    })
    .call(force.drag);

node.append("rect")
    .attr("class", "node")
    .attr("width", 100)
    .attr("height", 35)
    .style("fill", function(d) {
        return color(d.group);
    })
    .style("stroke", "black")
    .style("stroke-width", "1px");

node.append("text")
    .text(function(d) {
        return d.name;
    })
    .style("font-size", "12px")
    .attr("dy", "1em");

node.append("title")
    .text(function(d) {
        return d.name;
    });

force.on("tick", function() {
    link.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("x", function(d) {
            return d.x;
        })
        .attr("y", function(d) {
            return d.y;
        });
});

---

更新

感謝Lars的評論以及他的codepen現在可以使用了。

我對代碼進行的更新：

1. 添加Lars演示的變換
2. 更改鏈接以連接矩形的中心
3. 在矩形中添加了圓角
4. 使文本略有縮進
5. 更改為使用窗口的寬度/高度

這是我的新Codepen： http ：//codepen.io/anon/pen/bdgREd

var width = window.innerWidth,
    height = window.innerHeight,
    nodeWidth = 100,
    nodeHeight = 35;

var color = d3.scale.category20();

var force = d3.layout.force()
    .charge(-1500)
    .linkDistance(100)
    .friction(0.5)
    .size([width, height]);

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

force
    .nodes(graph.nodes)
    .links(graph.links)
    .start();

var link = svg.selectAll(".link")
    .data(graph.links)
    .enter().append("line")
    .attr("class", "link")
    .style("stroke-width", function(d) {
        return Math.sqrt(d.value);
    });

var node = svg.selectAll(".node")
    .data(graph.nodes)
    .enter()
    .append("g")
    .attr("transform", function(d) {
        return "translate(" + d.x + "," + d.y + ")";
    })
    .call(force.drag);

node.append("rect")
    .attr("class", "node")
    .attr("width", nodeWidth)
    .attr("height", nodeHeight)
    .attr("rx", 5)
    .attr("ry", 5)
    .style("fill", function(d) {
        return color(d.group);
    })
    .style("stroke", "black")
    .style("stroke-width", "1px");

node.append("text")
    .attr("x", 5)
    .attr("y", 2)
    .text(function(d) {
        return d.name;
    })
    .style("font-size", "12px")
    .attr("dy", "1em");

node.append("title")
    .text(function(d) {
        return d.name;
    });

force.on("tick", function() {
    link.attr("x1", function(d) {
            return d.source.x + (nodeWidth / 2);
        })
        .attr("y1", function(d) {
            return d.source.y + (nodeHeight / 2);
        })
        .attr("x2", function(d) {
            return d.target.x + (nodeWidth / 2);
        })
        .attr("y2", function(d) {
            return d.target.y + (nodeHeight / 2);
        });

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

Answer 1

您正在g元素上設置x和y屬性以更改其位置-這不會做任何事情。 您需要改為設置transform屬性，就像添加g元素時所做的那樣。 所以您的tick處理程序函數將包含

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

代替

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

在此處完成演示。