固定节点未固定(d3 Force Directed Graph)
Fixed nodes not being fixed (d3 Force Directed Graph)
我正在设置要固定的节点
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
如果有人也知道如何设置 canvas 以便顶部或底部没有任何东西漏出,我也将不胜感激。
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
}))
我正在设置要固定的节点
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
如果有人也知道如何设置 canvas 以便顶部或底部没有任何东西漏出,我也将不胜感激。
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
}))