在 SVG 路径的中间显示 SVG 图像答案

【问题标题】：Display an SVG image at the middle of an SVG path在 SVG 路径的中间显示 SVG 图像
【发布时间】：2013-01-29 12:23:52
【问题描述】：

我有一个具有不同大小节点的力有向图。我想在连接两个节点的每条路径的中间显示一个自定义图标。从 d3 示例中，我找到了在节点内显示图像的方法。但是，当我在路径上尝试相同的技术时，不会显示图像。

var path = svg.append("svg:g").selectAll("path").data(force.links());

var pathEnter = path.enter().append("svg:path");

pathEnter.attr("class", function(d) {
    return "link " + d.target.type;
})

pathEnter.append("svg:g").append("image")
    .attr("xlink:href","http://127.0.0.1:8000/static/styles/images/add.png")
    .attr("x",0).attr("y",0).attr("width",12).attr("height", 12)
    .attr("class", "type-icon");

【问题讨论】：

标签： javascript svg d3.js force-layout

【解决方案1】：

我想在提问之前我需要多一点耐心。我解决问题的方法是：

var icon = svg.append("svg:g").selectAll("g")
.data(force.links()).enter().append("svg:g");

icon.append("image").attr("xlink:href","imagePath")
  .attr("x", -20)
  .attr("y", -2)
  .attr("width", 12).attr("height", 12)
        .attr("class", "type-icon");

然后在tick函数中：

        icon.attr("transform", function(d) {
            return "translate(" +((d.target.x+d.source.x)/2) + "," +
                ((d.target.y+d.source.y))/2 + ")";
        });

获取两个节点之间的中心点。

【讨论】：