Javascript d3.js力有向图球体
我已经适应了。我想让图形稳定下来,然后旋转球体,而不改变图形中各点之间的关系。相反,当我拖动时,它似乎在拖动图形,而不是旋转球体。拖动图形将激活“强制启动”。如果我关闭Javascript d3.js力有向图球体,javascript,d3.js,Javascript,D3.js,我已经适应了。我想让图形稳定下来,然后旋转球体,而不改变图形中各点之间的关系。相反,当我拖动时,它似乎在拖动图形,而不是旋转球体。拖动图形将激活“强制启动”。如果我关闭force.start() var svg = d3.select("#cluster").append("svg") .attr("width", width) .attr("height", height) .call(d3.behavior.drag() .origin(function(
force.start()
var svg = d3.select("#cluster").append("svg")
.attr("width", width)
.attr("height", height)
.call(d3.behavior.drag()
.origin(function() { var r = projection.rotate(); return {x: 2 * r[0], y: -2 * r[1]}; })
.on("drag", function() { force.start(); var r = [d3.event.x / 2, -d3.event.y / 2, projection.rotate()[2]]; t0 = Date.now(); origin = r; projection.rotate(r); }))
从中,我发现我可以旋转分划,但随后我所有的链接和节点都消失了
var path = d3.geo.path()
.projection(projection);
var λ = d3.scale.linear()
.domain([0, width])
.range([-180, 180]);
var φ = d3.scale.linear()
.domain([0, height])
.range([90, -90]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
svg.on("mousemove", function() {
var p = d3.mouse(this);
projection.rotate([λ(p[0]), φ(p[1])]);
svg.selectAll("path").attr("d", path);
});
链接和节点的添加方式如下:
var link = svg.selectAll("path.link")
.data(graph.links)
.enter().append("path").attr("class", "link")
.attr ("stroke-width", function(d){return d.value/3});
var node = svg.selectAll("path.node")
.data(graph.nodes)
.enter()
.append("g")
.attr("class", "gnode")
.attr("text-anchor", "middle")
.append("path").attr("class", "node")
.style("fill", function(d) { return d.color; })
.style("stroke", function(d) { return d3.rgb(fill(d.group)).darker(); })
我想完成的是:当图形固定到位时,我想使用拖动手势旋转球体,其中包含节点和链接
如何实现这一点?这可能会沿一个轴旋转
var rotateScale = d3.scale.linear().domain([0, width]).range([-180,180]);//width of SVG
d3.select("svg").on("mousedown",startRotating).on("mouseup",stopRotating);
function startRotating() {
d3.select("svg").on("mousemove",function() {
var p = d3.mouse(this);
projection.rotate([rotateScale(p[0]),0]);
});
}
function stopRotating() {
d3.select("svg").on("mousemove",null);
}
这可以通过调整在第一个代码段中定义的
svg
上为drag
事件注册的处理程序来实现。这需要两个编辑:
force.start()
,因为您不想在拖动时重新启动强制tick()
轻松完成。如果在步骤1中未停用该力,则会重复调用该函数,因为该函数已注册为该力布局的tick
事件的处理程序。现在,你已经解除了原力,你必须明确地称之为原力李>
重新格式化的代码如下所示:
.on("drag", function() {
//force.start(); // 1. Don't restart the force.
var r = [d3.event.x / 2, -d3.event.y / 2, projection.rotate()[2]];
t0 = Date.now();
origin = r;
projection.rotate(r);
tick(); // 2. Trigger the rendering after adjusting the projection.
}))
看看这个。谢谢,这个例子正是我想要的。我对你的建议的迅速应用并没有解决问题,但这个例子显然有效。我将进一步研究它,这将解决我的问题。谢谢你,这很有效。需要包含示例中的tick函数。再次感谢!