Question

我正在设置要用

修复的节点

let link = svg.append("g")
  .attr("class", "links")
  .selectAll("line")
  .data(graph.links)
  .enter().append("line")
  .attr("stroke-width",  () => 4)

let node = svg.append('g')
  .attr("class", "nodes")
  .selectAll(".node")
  .data(graph.nodes)
  .enter().append("g")
  .attr("class", "node")
  .call(
    d3.drag()
    .on("start", Node.dragstarted)
    .on("drag", Node.dragged)
    .on("end", Node.dragended))

node.append("title")
  .text(d => d.country)

node.append('image')
    .attr('xlink:href', d => 'https://rawgit.com/hjnilsson/country-flags/master/svg/' + d.code + '.svg')
    .attr('height', d => 2.5 * (area[d.code]||5))
    .attr('width', d => 4 * (area[d.code])||5)
simulation
  .nodes(graph.nodes.map(c => {
    if(latlong[c.code] === undefined) {
      console.log(c,'missing lat/long data')
      return c
    }
    c.x = (+latlong[c.code][0])
    c.y = (+latlong[c.code][1])
    c.fixed = true
    return c
  }))
  .on("tick", ticked)

这样可以在没有x和y值的情况下正确显示图像，但是..固定属性不起作用。

这是我的代码：codepen

如果有人也知道如何设置画布，以便没有任何东西从顶部或底部逃脱，我也会感激。

Answer 1

d3.js v4没有fixed属性。相反，您需要设置节点fx和fy属性。请注意，您的拖动功能已经在执行此操作。

.nodes(graph.nodes.map(c => {
if(latlong[c.code] === undefined) {
  console.log(c,'missing lat/long data')
  return c
}
c.fx = c.x = (+latlong[c.code][0])
c.fy = c.y = (+latlong[c.code][1])
return c
}))

https://codepen.io/anon/pen/ZKXmVe

固定节点未固定（d3 Force Directed Graph）

1 个答案: