Javascript D3.js-使用强制布局中的图像标记节点

我的代码笔中有以下代码，可以渲染精灵标志（来自CSS），但它不在基于节点位置的位置

事实上，我能够从顶部拖动标志精灵中的节点

查看一些console.log，在调用节点时，

function ticked（）

中的

d.x

和

d.y

位置似乎没有传递

我不知道如何解决这个问题

const width = w - (margin.left + margin.right);
const height = h - (margin.top + margin.bottom);

let flagNodes = d3.select("#canvas")
                  .append("div")
                  .classed("flag-nodes",true)

let svg = d3.select("#canvas")
              .append("svg")
              .attr("id","chart")
              .attr("width", w)
              .attr("height", h)

let chart = svg.append("g")
                .classed("display", true)
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

let simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d,i) {
      return i;
      }))
    .force("charge", d3.forceManyBody().strength(-4))
    .force("center", d3.forceCenter(width/2, height/2))

let node = flagNodes.selectAll(".flag-nodes")
        .data(data.nodes)
        .enter()
          .append("div")
          .attr("class", function(d,i){
            return `flag flag-${d.code}`
          })
          .call(d3.drag()
          .on("start", dragstarted)
          .on("drag", dragged)
          .on("end", dragended)
        )

let link = chart.append("g")
        .classed("links",true)
        .selectAll("line")
        .data(data.links)
        .enter()
          .append("line")


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

simulation
    .nodes(data.nodes)
    .on("tick", ticked);

simulation.force("link")
    .links(data.links);

//functions provided by D3.js
//
function ticked() {
    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
        .style("left", function(d) {return d.x})
        .style("top", function(d) {return 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;
}

---

你已经非常接近了！我花了很长时间才弄明白

我最终在我的项目目录中创建了一个包含国家PNG的flag文件夹。然后使用国家代码动态加载它们

以下是我解决问题的方法：

const node=svg.selectAll（“.flag”）
.data（data.nodes）
.enter（）.append（“图像”）
.attr（“xlink:href”，d=>require（`./flag/${d.code}.png`））
.attr（“宽度”，半径）
.attr（“高度”，半径）
.call（d3.drag（）
.on（“开始”，拖动开始）
.打开（“拖动”，拖动）
.on（“结束”，绘图））

你已经非常接近了！我花了很长时间才弄明白

我最终在我的项目目录中创建了一个包含国家PNG的flag文件夹。然后使用国家代码动态加载它们

以下是我解决问题的方法：

const node=svg.selectAll（“.flag”）
.data（data.nodes）
.enter（）.append（“图像”）
.attr（“xlink:href”，d=>require（`./flag/${d.code}.png`））
.attr（“宽度”，半径）
.attr（“高度”，半径）
.call（d3.drag（）
.on（“开始”，拖动开始）
.打开（“拖动”，拖动）
.on（“结束”，绘图））