我有一个包含节点组的d3力导向图:
var node = vis.selectAll("g.node")
.data(json.nodes)
.enter().append("svg:g")
.attr("class", "node")
.attr("id", function(d) { return "node" + d.index; })
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.call(force.drag);
这段代码可以正常渲染。
当我展示id为detail_container
的详细内容div
时,我希望把这些节点向右移动200个像素。
我尝试过以下方法,但在展示detail_container
时,节点没有发生任何变化(除了展示详细div
):
$('#detail_container').fadeIn('slow', function() {
d3.selectAll("g.node").attr("transform", function(d) { return "translate(200, 0)"; });
});
d3.selectAll("g.node")
语句包含节点数据,我可以在控制台中查看确认:
console.log(d3.selectAll("g.node"));
作为另一种方法,我将缩放/平移行为附加到我的图表上:
var vis = d3.select("#position")
.append("svg:svg")
.attr("width", w)
.attr("height", h)
.attr("pointer-events", "all")
.append("svg:g")
.call(d3.behavior.zoom().on("zoom", redraw))
.append("svg:g");
这个可以正常工作。然而,它只与鼠标交互,而不是与程序中发生的事件交互,所以是否有一种编程方式来调用缩放/平移行为,以便我可以实现我想要的翻译?