Javascript 通过键盘更新圆形包装布局
我有一个圆形包布局,它表示json文件中的一些数据。当我点击键盘上的左右箭头时,我想更新包布局。我设法更新了圆的位置,但没有更新半径。你能看一下下面的代码吗?我的圈包并不是真正的分层结构,我的意思是我只有一个家长,id为“CoreColl”的圈,然后是所有的孩子 谢谢, RMJavascript 通过键盘更新圆形包装布局,javascript,d3.js,keyboard,circle-pack,Javascript,D3.js,Keyboard,Circle Pack,我有一个圆形包布局,它表示json文件中的一些数据。当我点击键盘上的左右箭头时,我想更新包布局。我设法更新了圆的位置,但没有更新半径。你能看一下下面的代码吗?我的圈包并不是真正的分层结构,我的意思是我只有一个家长,id为“CoreColl”的圈,然后是所有的孩子 谢谢, RM 我实际上解决了这个问题:我将新数据绑定到了错误的位置。在.selectAll('circle')之后绑定新数据非常有效。如果您已经回答了自己的问题,请不要忘记将其标记为已解决。您认为这是正确的解决方案吗?顺便说一句,我在转
我实际上解决了这个问题:我将新数据绑定到了错误的位置。在.selectAll('circle')之后绑定新数据非常有效。如果您已经回答了自己的问题,请不要忘记将其标记为已解决。您认为这是正确的解决方案吗?顺便说一句,我在转换饼图的内半径时遇到问题..:(
var pack = d3.layout.pack()
.value(function(d) {
return d.someField;
})
.children(
function children(d) {
return d.someArray;
});
var corevis = d3.select('#svgCoreGroup');
// Creating the circle packed core
var gNodes = corevis.data([json]).selectAll("g.node")
.data(pack.nodes, function(d) {return (d.children ? "coreCircle" : d.name)});
// Remove
gNodes.exit().remove()
// Update
corevis
.data([json]).selectAll("g.node")
.data(pack.nodes, function(d) {return (d.children ? "coreCircle" : d.name)})
.attr("class", function(d) { return d.children ? "node" : "leaf node"; })
.attr("id", function(d) { return d.children ? "coreCircle" : null; })
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.selectAll("circle")
.transition()
.duration(500)
.attr("r", function(d) { return d.children ? coreSize : d.r; });
var node = gNodes
.enter().append("g")
.attr("class", function(d) { return d.children ? "node" : "leaf node"; })
.attr("id", function(d) { return d.children ? "coreCircle" : null; })
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
node.append("circle")
.attr("r", function(d) { return d.children ? coreSize : d.r; })