使用D3.pack转换后重叠的圆圈
Circles overlapping after transition with D3.pack
我有一个JSON文件，我使用d3.nest（）函数重新组织它，然后使用它转换到不同的状态。
然而，当我进行转换时，高层中的圆圈以任何方式重叠，它们的移动都不是很优雅（它们现在出现和消失在我们的脑海中）。我通过使用moveToFront（）函数成功地将顶部节点保持在顶部，正如在另一个问题上建议的那样。这适用于顶部节点，但并非适用于所有层。我把圆圈做成半透明的，这样更容易看到发生了什么。
我也在试着添加标签，但不管我做什么，它都完全搞砸了。我在想，也许是因为订单搞砸了？
这是我为有问题的函数编写的代码。我还放了三个JSON文件示例，代表我正在使用的三个层次结构。
如果有人能帮忙，我们将不胜感激！
function update(i, duration) {
var delay = 0;
var root = changehierarchy(childdata, i);
var focus = root;
var nodes = pack.nodes(root);
var v = [root.x, root.y, root.r * 2 + margin];
var k = diameter / v[2]; view = v;
var vis = svg.selectAll('circle')
.data(nodes, function(d) { return d.name; });
//.sort(function (a, b) { return a.depth < b.depth ? -1 : 1; })
// update
vis.data(nodes)
.transition()
.each("start", function(d){ d3.select(this).moveToFront(); })
.duration(duration)
.attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; })
.attr('transform', function(d) { return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")"; })
.style("fill", function(d) { return d.children ? color(d.depth) : d.color; })
.style("opacity", function(d) { return d.children ? 0.4 : 1; } )
.attr('r', function(d) { return d.r; });
//enter
vis.data(nodes)
.enter()
.append('circle')
.attr("transform", function(d) { return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")"; })
.attr("r", function(d) { return d.r * k; })
.attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; })
.style("fill", function(d) { return d.children ? color(d.depth) : d.color; })
.style("opacity", function(d) { return d.children ? 0.4 : 1; } );
//exit
vis.exit()
.transition()
.duration(duration)
.style('opacity', 0)
.remove();
var node = svg.selectAll("circle,text");
d3.select("body")
.style("background", color(-1));
d3.selection.prototype.moveToFront = function() {
return this.each(function(){
this.parentNode.appendChild(this);
});
d3.selection.prototype.appendText = function() {
var text = svg.selectAll("text")
.data(nodes, function(d) { return d.name; });
text.enter().append("text")
.attr("class", "label")
.style("fill-opacity", function(d) { return d.parent === root ? 1 : 0; })
.style("display", function(d) { return d.parent === root ? "inline" : "none"; })
.text(function(d) { return d.name; });
};
};
JSON文件：第一层次
{
"name":"POPULATION (n=8)",
"children":[
{
"name":1,
"name1":"Total",
"name2":"POPULATION (n=8)",
"eventA":"Event A is true",
"eventB":"Event B is true",
"color":"#944dff",
"size":50
},
{
"name":2,
"name1":"Total",
"name2":"POPULATION (n=8)",
"eventA":"Event A is true",
"eventB":"Event B is true",
"color":"#944dff",
"size":49
},
{
"name":3,
"name1":"Total",
"name2":"POPULATION (n=8)",
"eventA":"Event A is true",
"eventB":"Event B is false",
"color":"#944dff",
"size":48
},
{
"name":4,
"name1":"Total",
"name2":"POPULATION (n=8)",
"eventA":"Event A is true",
"eventB":"Event B is false",
"color":"#944dff",
"size":47
},
{
"name":5,
"name1":"Total",
"name2":"POPULATION (n=8)",
"eventA":"Event A is false",
"eventB":"Event B is true",
"color":"#FFFFFF",
"size":46
},
{
"name":6,
"name1":"Total",
"name2":"POPULATION (n=8)",
"eventA":"Event A is false",
"eventB":"Event B is true",
"color":"#FFFFFF",
"size":45
},
{
"name":7,
"name1":"Total",
"name2":"POPULATION (n=8)",
"eventA":"Event A is false",
"eventB":"Event B is false",
"color":"#FFFFFF",
"size":44
},
{
"name":8,
"name1":"Total",
"name2":"POPULATION (n=8)",
"eventA":"Event A is false",
"eventB":"Event B is false",
"color":"#FFFFFF",
"size":43
}
]
}
第二层次
{
"name":"POPULATION (n=8)",
"children":[
{
"name":"Event A is true",
"children":[
{
"name":1,
"name1":"Total",
"name2":"POPULATION (n=8)",
"eventA":"Event A is true",
"eventB":"Event B is true",
"color":"#944dff",
"size":50
},
{
"name":2,
"name1":"Total",
"name2":"POPULATION (n=8)",
"eventA":"Event A is true",
"eventB":"Event B is true",
"color":"#944dff",
"size":49
},
{
"name":3,
"name1":"Total",
"name2":"POPULATION (n=8)",
"eventA":"Event A is true",
"eventB":"Event B is false",
"color":"#944dff",
"size":48
},
{
"name":4,
"name1":"Total",
"name2":"POPULATION (n=8)",
"eventA":"Event A is true",
"eventB":"Event B is false",
"color":"#944dff",
"size":47
}
]
},
{
"name":"Event A is false",
"children":[
{
"name":5,
"name1":"Total",
"name2":"POPULATION (n=8)",
"eventA":"Event A is false",
"eventB":"Event B is true",
"color":"#FFFFFF",
"size":46
},
{
"name":6,
"name1":"Total",
"name2":"POPULATION (n=8)",
"eventA":"Event A is false",
"eventB":"Event B is true",
"color":"#FFFFFF",
"size":45
},
{
"name":7,
"name1":"Total",
"name2":"POPULATION (n=8)",
"eventA":"Event A is false",
"eventB":"Event B is false",
"color":"#FFFFFF",
"size":44
},
{
"name":8,
"name1":"Total",
"name2":"POPULATION (n=8)",
"eventA":"Event A is false",
"eventB":"Event B is false",
"color":"#FFFFFF",
"size":43
}
]
}
]
}
第三层次
{
"name":"POPULATION (n=8)",
"children":[
{
"name":"Event B is true",
"children":[
{
"name":"Event A is true",
"children":[
{
"name":1,
"name1":"Total",
"name2":"POPULATION (n=8)",
"eventA":"Event A is true",
"eventB":"Event B is true",
"color":"#944dff",
"size":50
},
{
"name":2,
"name1":"Total",
"name2":"POPULATION (n=8)",
"eventA":"Event A is true",
"eventB":"Event B is true",
"color":"#944dff",
"size":49
}
]
},
{
"name":"Event A is false",
"children":[
{
"name":5,
"name1":"Total",
"name2":"POPULATION (n=8)",
"eventA":"Event A is false",
"eventB":"Event B is true",
"color":"#FFFFFF",
"size":46
},
{
"name":6,
"name1":"Total",
"name2":"POPULATION (n=8)",
"eventA":"Event A is false",
"eventB":"Event B is true",
"color":"#FFFFFF",
"size":45
}
]
}
]
},
{
"name":"Event B is false",
"children":[
{
"name":"Event A is true",
"children":[
{
"name":3,
"name1":"Total",
"name2":"POPULATION (n=8)",
"eventA":"Event A is true",
"eventB":"Event B is false",
"color":"#944dff",
"size":48
},
{
"name":4,
"name1":"Total",
"name2":"POPULATION (n=8)",
"eventA":"Event A is true",
"eventB":"Event B is false",
"color":"#944dff",
"size":47
}
]
},
{
"name":"Event A is false",
"children":[
{
"name":7,
"name1":"Total",
"name2":"POPULATION (n=8)",
"eventA":"Event A is false",
"eventB":"Event B is false",
"color":"#FFFFFF",
"size":44
},
{
"name":8,
"name1":"Total",
"name2":"POPULATION (n=8)",
"eventA":"Event A is false",
"eventB":"Event B is false",
"color":"#FFFFFF",
"size":43
}
]
}
]
}
]
}
问题是，一次更新调用vis.data(...) 3次，这是在错误地使用它。只有第一个data()调用是必要的，而且它也是您正确提供第二个参数（即function(d) { return d.name; }）的地方。
（我从未测试过这一点，但如果您将第二个参数添加到另外两个data()调用中，则可能会正常工作，但这也不合适）
我用适当的东西替换了对data()的两个调用。我还交换了输入和更新块的位置（即顺序）。
在这之后，进入过渡期的可能性仍然不太大，但从这个开始：
var vis = svg.selectAll('circle')
.data(nodes, function(d) { return d.name; });
// enter (it's not necessary to assign to 'var visEnter', but it's
// available if you need to work more with that selection)
var visEnter = vis.enter()
.append('circle')
.attr("transform", function(d) { return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")"; })
.attr("r", function(d) { return d.r * k; })
.attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; })
.style("fill", function(d) { return d.children ? color(d.depth) : d.color; })
.style("opacity", function(d) { return d.children ? 0.4 : 1; } );
// update
vis
.transition()
.each("start", function(d){ d3.select(this).moveToFront(); })
.duration(duration)
.attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; })
.attr('transform', function(d) { return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")"; })
.style("fill", function(d) { return d.children ? color(d.depth) : d.color; })
.style("opacity", function(d) { return d.children ? 0.4 : 1; } )
.attr('r', function(d) { return d.r; });
//exit
vis.exit()
.transition()
.duration(duration)
.style('opacity', 0)
.remove();
相关文章：
- D3在一个调用中绘制不同的SVG形状，没有可见性
- 为什么在单独的函数中应用时转换会闪烁/断断续续(D3）
- 如何在d3.js中返回路径的y坐标
- d3基于用户选择动态更新节点
- 有条件更新d3.js力图中节点的最佳方法
- 为什么我的d3.jsselectAll+过滤器没有过滤
- 使用D3.js计算带有字母间距的文本长度
- d3中堆栈函数和嵌套函数之间的差异
- D3.js模式不适用于弧形或圆环图
- 比例尺D3.js之后的地理路径重叠
- 重叠工具d3.js的问题
- D3 数据与海量数据重叠问题
- 避免D3.js中的子节点重叠
- d3单词clouds-出现了太多的重叠
- 如何在D3中添加抖动以避免重叠
- D3:饼式标签的“水平”尾线没有重叠
- d3.js Word云中元素的重叠
- 使用D3.pack转换后重叠的圆圈
- D3 x轴长标签重叠
- 停止d3圆包装标签重叠
