Svg 圆形包装图-两组值之间的转换
我有一张与之非常相似的图表 在某些时候,用户希望看到一些不同的数据。显然,可以立即显示不同的图表,但从感知和认知的角度来看,转换会更好。注意:层次结构保持不变,没有新的或删除的节点,只有确定圆大小更改的基础值 在两个结构相同但值不同的圆包图之间实现平滑过渡的好方法是什么 (当然,在过渡期间,也就是说持续10秒,不需要像原始图形中那样保持圆之间的关系,圆可以相交并相互传递) 我知道有类似的解决方案。然而,它根本不能应用于圆形填料。树形映射甚至有一个特殊的函数sticky(),在这种情况下会有所帮助 编辑:我正在附加新版本的 一些功能现在开始工作。由随机数据驱动的转换非常漂亮 我现在有两个问题:Svg 圆形包装图-两组值之间的转换,svg,d3.js,tooltip,transition,circle-pack,Svg,D3.js,Tooltip,Transition,Circle Pack,我有一张与之非常相似的图表 在某些时候,用户希望看到一些不同的数据。显然,可以立即显示不同的图表,但从感知和认知的角度来看,转换会更好。注意:层次结构保持不变,没有新的或删除的节点,只有确定圆大小更改的基础值 在两个结构相同但值不同的圆包图之间实现平滑过渡的好方法是什么 (当然,在过渡期间,也就是说持续10秒,不需要像原始图形中那样保持圆之间的关系,圆可以相交并相互传递) 我知道有类似的解决方案。然而,它根本不能应用于圆形填料。树形映射甚至有一个特殊的函数sticky(),在这种情况下会有所帮助
function updateVis() {
// change pack value
if (updateMethod == 0)
pack.value(function(d) { return d.size; });
if (updateMethod == 1)
pack.value(function(d) { return 100; });
if (updateMethod == 2)
pack.value(function(d) { return 1 + Math.floor(Math.random()*101); });
var data1 = pack.nodes(data);
// titles = ?????
circles.transition()
.duration(2000)
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", function(d) { return d.r; });
return;
};
提前感谢您的帮助或提示。看来我终于解决了所有问题。jsfiddle是 以下是处理圆包布局平滑过渡的全部代码(数据定义和按钮创建除外):
var diameter = 500,
format = d3.format(",d"),
dataSource = 2;
var pack = d3.layout.pack()
.size([diameter - 4, diameter - 4])
.value(function(d) { return d.size; });
var svg = d3.select("body").append("svg")
.attr("width", diameter)
.attr("height", diameter);
var data = getData();
var vis = svg.datum(data).selectAll(".node")
.data(pack.nodes)
.enter()
.append("g");
var titles = vis.append("title")
.attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y; })
.text(function(d) { return d.name +
(d.children ? "" : ": " + format(d.value)); });
var circles = vis.append("circle")
.attr("stroke", "black")
.style("fill", function(d) { return !d.children ? "tan" : "beige"; })
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", function(d) { return d.r; });
updateVis();
function updateVis() {
if (dataSource == 0)
pack.value(function(d) { return d.size; });
if (dataSource == 1)
pack.value(function(d) { return 100; });
if (dataSource == 2)
pack.value(function(d) { return 1 +
Math.floor(Math.random()*301); });
var data1 = pack.nodes(data);
titles.attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y; })
.text(function(d) { return d.name +
(d.children ? "" : ": " + format(d.value)); });
circles.transition()
.duration(5000)
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", function(d) { return d.r; });
};
我取得了一些进展。圆圈现在可以正常移动了。我将附加新的js小提琴。还有一些问题。我不知道如何更新工具提示。