Javascript 强制图中直线上的D3标号_Javascript_D3.js_Label_Force Layout

Javascript 强制图中直线上的D3标号

javascript d3.js

Javascript 强制图中直线上的D3标号,javascript,d3.js,label,force-layout,Javascript,D3.js,Label,Force Layout,这里有一个示例，说明如何在D3强制图中的节点上设置标签。我想做的是在线路上贴上标签节点上的标签示例：此代码将在左角显示该行的文本。它似乎从画布上而不是从我的线条上获取了x，y坐标。如何解决这个问题 var labelLine=olinks.append（“文本”） .attr（“x”，12） .attr（“dy”，“.35em”） .文本（“EEEE”） .节点{ 冲程：#fff；笔划宽度：1.5px； } .链接{ 行程：#999；笔画不透明度：.6； } 变量图={ “节点”：[

这里有一个示例，说明如何在D3强制图中的节点上设置标签。我想做的是在线路上贴上标签

节点上的标签示例：

此代码将在左角显示该行的文本。它似乎从画布上而不是从我的线条上获取了x，y坐标。如何解决这个问题

var labelLine=olinks.append（“文本”） .attr（“x”，12） .attr（“dy”，“.35em”） .文本（“EEEE”）


.节点{
冲程：#fff；
笔划宽度：1.5px；
}
.链接{
行程：#999；
笔画不透明度：.6；
}
变量图={
“节点”：[
{“name”：“App1 main”，“group”：1}，
{“名称”：“App2”，“组”：1}，
{“name”：“App3”，“group”：1}，
{“name”：“App4”，“group”：1}，
{“名称”：“内容-1”，“组”：3}，
{“名称”：“内容-1”，“组”：3}，
{“名称”：“内容-1”，“组”：3}，
{“名称”：“内容-1”，“组”：3}，
{“名称”：“彭眉胥”，“集团”：3}
],
“链接”：[
{“源”：1，“目标”：0，“值”：1}，
{“源”：2，“目标”：0，“值”：1}，
{“源”：0，“目标”：3，“值”：1}
]
};
可变宽度=960，
高度=500；
var color=d3.scale.category20（）；
var-force=d3.layout.force（）
。收费（-300）
.linkDistance（60）
.尺寸（[宽度、高度]）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var drawGraph=函数（图）{
力
.nodes（图.nodes）
.links（graph.links）
.start（）；
var olinks=svg.selectAll（“g.link”）
.数据（图表.链接）
.enter（）.append（“g”）
.呼叫（强制拖动）；
var link=olinks.append（“行”）
.attr（“类”、“链接”）
.style（“笔划宽度”，函数（d）{return Math.sqrt（d.value）；}）；
var labelLine=olinks.append（“文本”）
.attr（“x”，12）
.attr（“dy”，“.35em”）
.文本（“EEEE”）；
var gnodes=svg.selectAll（'g.gnode'）
.数据（图.节点）
.输入（）
.append（'g'）
.classed（'gnode'，true）；
var node=gnodes.append（“圆”）
.attr（“类”、“节点”）
.attr（“r”，5）
.style（“fill”，函数（d）{返回颜色（d.group）；}）
.呼叫（强制拖动）；
var labels=gnodes.append（“文本”）
.attr（“x”，12）
.attr（“dy”，“.35em”）
.text（函数（d）{返回d.name；}）；
控制台日志（标签）；
强制打开（“勾号”，函数（）{
attr（“x1”，函数（d）{返回d.source.x；}）
.attr（“y1”，函数（d）{返回d.source.y；}）
.attr（“x2”，函数（d）{返回d.target.x；}）
.attr（“y2”，函数（d）{返回d.target.y；}）；
属性（“转换”，函数（d）{
返回“translate（+[d.x，d.y]+”）；
});
});
};
绘图（图形）；

是一个行为正确的示例

要点如下：

1）您需要将链接定义为SVG“g”元素，以便可以为每个链接定义行和标签，并正确计算坐标

2）标签文本必须水平居中（代码：

.attr（“文本锚定”，“中间”

）

3）在tick（）中，您需要计算标签的坐标，作为源节点和目标节点之间的算术平均值

希望这有帮助

最近也有。

你看到了吗？为什么你总是在发布问题1分钟后找到问题的答案，即使你已经找了好几天了？这个例子回答了这个问题。

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  .node {
    stroke: #fff;
    stroke-width: 1.5px;
}

.link {
    stroke: #999;
    stroke-opacity: .6;
}
</style>
<body>
<script src="./Script/d3.v3/d3.v3.min.js"></script>
<script>
    var graph = {
        "nodes": [
          { "name": "App1-main", "group": 1 },
          { "name": "App2", "group": 1 },
          { "name": "App3", "group": 1 },
          { "name": "App4", "group": 1 },
          { "name": "Content-1", "group": 3 },
          { "name": "Content-1", "group": 3 },
          { "name": "Content-1", "group": 3 },
          { "name": "Content-1", "group": 3 },
          { "name": "Pontmercy", "group": 3 }
        ],
        "links": [
          { "source": 1, "target": 0, "value": 1 },
          { "source": 2, "target": 0, "value": 1 },
          { "source": 0, "target": 3, "value": 1 }
        ]
    };
    var width = 960,
        height = 500;

    var color = d3.scale.category20();

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

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

    var drawGraph = function (graph) {
        force
            .nodes(graph.nodes)
            .links(graph.links)
            .start();

        var olinks = svg.selectAll("g.link")
            .data(graph.links)
            .enter().append("g")
            .call(force.drag);

        var link = olinks.append("line")
                    .attr("class", "link")
                    .style("stroke-width", function (d) { return Math.sqrt(d.value);    });

        var labelLine = olinks.append("text")
                    .attr("x", 12)
                    .attr("dy", ".35em")
                    .text("eeeeee");

        var gnodes = svg.selectAll('g.gnode')
           .data(graph.nodes)
           .enter()
           .append('g')
           .classed('gnode', true);

        var node = gnodes.append("circle")
            .attr("class", "node")
            .attr("r", 5)
            .style("fill", function (d) { return color(d.group); })
            .call(force.drag);

        var labels = gnodes.append("text")
                        .attr("x", 12)
                        .attr("dy", ".35em")
                        .text(function (d) { return d.name; });

        console.log(labels);

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

            gnodes.attr("transform", function (d) {
                return 'translate(' + [d.x, d.y] + ')';
            });



        });
    };

    drawGraph(graph);

 </script>