javascript - 如何用d3中的形状移动形状背景图像

Question

我正在尝试在力导向图中绘制团队成员的技能和兴趣。

基本结构已绘制出来。我希望圆圈中包含人物照片(如果有)，而不是在圆圈旁边写上名字。

调用 .force('charge', d3.forceManyBody()) 让我的形状在初始化期间自行重新定向。这会对背景图像造成一些奇怪的重复效果，因为它不随形状移动。

这是完整的代码，也可通过 Fiddle 获取。 :

var width = 640,
    height = 480;

    var team = [
        {name: "User 1", skills: ["C#", "Typescript", ".Net", "ArcGIS"]},
        {name: "User 2", skills: ["Project Management", "Candy Crush", ".Net"]},
        {name: "User 3", skills: ["C#", "Javascript", ".Net"]},
        {name: "User 4", skills: ["Consulting", "Release Management", "Xml"]},
        {name: "User 5", skills: ["Consulting", "Powerpoint"]},
        {name: "User 6", skills: ["Cold Fusion", "ArcGIS", "SQL Server"]},

    ];

    var links = [];
    team.forEach((member, idx) => {
        member.skills.forEach(skill => {
            //foreach skill iterate over each member and find fitting matches
          team.forEach((memberToCompare, idx2) => {
              var compareIndex = memberToCompare.skills.indexOf(skill)
            //   console.log(member.name, idx, skill, "---",memberToCompare.name, memberToCompare.skills[compareIndex], idx2, compareIndex);
            if(compareIndex !== -1 && idx !== idx2) {
                links.push({source: idx, target: idx2, value: skill})
            }
          })
        })
      })

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

svg.append("g").attr("class", "nodes");
svg.append("g").attr("class", "links");

var defs = svg.append('svg:defs');

defs.append("svg:pattern")
    .attr("id", "grump_avatar")
    .attr("width", 40)
    .attr("height", 40)
    .attr("patternUnits", "userSpaceOnUse")
    .append("svg:image")
    .attr("xlink:href", 'http://placekitten.com/g/40/40')
    .attr("width", 40)
    .attr("height", 40);

var force = d3.forceSimulation(team)
    .force("link", d3.forceLink().links(links)
        .distance(150)
    // .strength(-1)
    )
    .force('charge', d3.forceManyBody())
    .force('center', d3.forceCenter(width / 2, height / 2))
    //.force('collision', d3.forceCollide().radius((d) => { return d.radius; }))
    .on('tick', ticked);



function ticked() {
    updateLinks();
    var u = d3.select('svg')
        .selectAll('circle')
        .data(team)

    u.enter()
        .append('circle')
        .attr('r', 20)
        .merge(u)
        .attr('cx', function (d) {
            return d.x
        })
        .attr('cy', function (d) {
            return d.y
        })
        .style("fill", "#fff")
        .style("fill", "url(#grump_avatar)");

    u.exit().remove()
}

function updateLinks() {
    var u = d3.selectAll(".links")
        .selectAll("path")
        .data(links);

    u.enter()
        .append("path")
        .merge(u)
        .attr("d", (d) => {
            var dx = d.target.x - d.source.x,
                dy = d.target.y - d.source.y,
                dr = Math.sqrt(dx * dx + dy * dy);
            return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
        })
        .attr("class", "link");

    u.exit().remove();
}

如何使背景图像粘在形状本身上，以便它随包含它的形状一起移动？

Answer 1

诀窍是将patternUnits更改为objectBoundingBox:

.attr("patternUnits", "objectBoundingBox")

使用它，使图像使用其所使用的形状内的坐标，而不是定义它的整个 svg 元素。

引用:https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/patternUnits