Question

因此，我做了大量研究，并搜索了我所有可以找到的正确方法。我用过Zoomable Circle Packing，太棒了。我想扩展它并添加新功能，但是我陷入了困境。
我认为我已经接近解决方案，但是找不到正确的方法。
我在圆上有一些文本，单击圆后，我想在文本上添加动画。问题是，当动画开始运行时，所有文本都将失去其转换原点（以及transform：翻译成动态的），然后动画就会运行。之后，他们回到了自己所在的位置，在他们所属圆的中心。这是应用变换的缩放代码：

function zoomTo(v) {
var k = diameter / v[2];
view = v;
setTimeout(() => {  //my code for generating animations
  text.style('animation', 'flip 2s')
}, 5000);

node.attr("transform", function (d) {
  return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")";
})

circle.attr("r", function (d) {
  return d.r * k;
});

} 您可以看到我的代码与setTimeout分开，它在5秒钟后应用了动画。 setTimeout用于使其更清晰并区分我的代码和为缩放功能编写的基本代码。正在通过animate.css使用flip animation。
我添加了文本代码以使其更加清晰：

var text = g.selectAll("text")
.data(nodes)
.enter().append("text")
.attr("class", "label")
.style("font-size", function (d) {
  if (d.depth == 1) {
    d.fontSize = 72;
    return '72px';
  }
  if (d.r / 2 > 5 && d.r / 2 < 20) {
    d.fontSize = d.r / 2;
    return d.r / 2 + 'px';
  }
  if (d.r > 20) {
    d.fontSize = 18;
    return '18px';
  }
  d.fontSize = 8;
  return '8px';
})
.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.data.name;
})
.on('mouseenter', function (d) {
  console.log(d3.select(this).node().getBBox().width);

  let newSize = d.fontSize + 10;
  d3.select(this).transition().duration(250).ease(d3.easeLinear).style("font-size", newSize + 'px')
  // var rectangle = svg.append("rect")
  //   .attr("x", d.x - d3.select(this).node().getBBox().width/2)
  //   .attr("y", d.y - d3.select(this).node().getBBox().height/2)
  //   .attr("width", d3.select(this).node().getBBox().width)
  //   .attr("height", d3.select(this).node().getBBox().height)
  //   .attr('fill', 'white')
})
.on('mouseleave', function (d) {
  d3.select(this).transition().duration(250).ease(d3.easeLinear).style("font-size", d.fontSize + 'px')
})

并且有working example的代码存在问题（请在打开页面后等待5秒钟。然后单击每个圆圈即可看到问题） 问题在于动画将覆盖以下转换：d3（zoomTo函数）应用的转换（x，y）。
非常感谢

将动画CSS添加到可缩放的圆形包装D3

0 个答案: