单击时的文本转换 D3.js

Question

我一直在互联网上搜索一个简单的 fiddle 获取带有两个 x y 坐标的文本并将其从点 1 过渡到点 2 但似乎找不到任何东西，如果有人知道任何例子的话不胜感激。然而到了要点第一段代码成功地在点的中心绘制了文本。

    svg.selectAll("text")
   .data(data)
   .enter()
   .append("text")
    .text(function(d) {
        return d.Name;
   })
   .attr("x", function(d) {
        return xScale(d.x);
   })
   .attr("y", function(d) {
        return yScale(d.y);
   })
   .attr("font-family", "sans-serif")
   .attr("font-size", "0.5px")
   .style('text-anchor','middle')
   .attr("fill", "black")

此转换是尝试更改文本并转换到新位置

    svg.selectAll('text') 
    .on('click', function (d) {

    svg.selectAll("text")
    d3.selectAll("text")
    .transition()
    .duration(1000)

    .data(data)
    .enter()
    .append("text")
    .text(function(d) {
        return d.newNames;
   })
   .attr("x", function(d) {
        return xScale(d.xx);
   })
   .attr("y", function(d) {
        return yScale(d.yy);
   })
   .attr("font-family", "sans-serif")
   .attr("font-size", "11px")
   .attr("fill", "black")
   })

这不起作用，不显示文本，但也不会在控制台中引发任何错误。我以前用 svg 形状做过这件事，它的工作方式完全相同，但无论出于何种原因，我似乎无法让它与文本一起过渡，感谢任何帮助谢谢

Answer 1

您的代码可以正常工作，但有点奇怪。首先，0.5px 的初始 font-size 不会在 chrome 中为我呈现。其次，你的转换代码有一个语法错误：

svg.selectAll("text")
d3.selectAll("text")

第三，您应该绑定数据，然后进行转换，而不是在转换期间进行绑定。另外，如果您只想移动现有文本而您的数据没有改变，为什么要重新绑定呢？而且您当然不需要 .enter().append()。

以下是我认为您想要的：

 svg.selectAll('text')
  .on('click', function(d) {
    svg.selectAll("text")
      .transition()
      .duration(1000)
      .text(function(d) {
        return d.newNames;
      })
      .attr("x", function(d) {
        return d.xx;
      })
      .attr("y", function(d) {
        return d.yy;
      })
      .attr("font-family", "sans-serif")
      .attr("font-size", "30px")
      .attr("fill", "black")
  });

完整代码：

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <script>
    var data = [{
      x: 20,
      y: 20,
      xx: 200,
      yy: 200,
      Name: "Hello",
      newNames: "GoodBye"
    },{
      x: 100,
      y: 20,
      xx: 300,
      yy: 200,
      Name: "Love",
      newNames: "Hate"
    }];

    var svg = d3.select('body')
      .append('svg')
      .attr('width', 500)
      .attr('height', 500);

    svg.selectAll("text")
      .data(data)
      .enter()
      .append("text")
      .text(function(d) {
        return d.Name;
      })
      .attr("x", function(d) {
        return d.x;
      })
      .attr("y", function(d) {
        return d.y;
      })
      .attr("font-family", "sans-serif")
      .attr("font-size", "14px")
      .style('text-anchor', 'middle')
      .attr("fill", "black");


    svg.selectAll('text')
      .on('click', function(d) {
        svg.selectAll("text")
          .transition()
          .duration(1000)
          .text(function(d) {
            return d.newNames;
          })
          .attr("x", function(d) {
            return d.xx;
          })
          .attr("y", function(d) {
            return d.yy;
          })
          .attr("font-family", "sans-serif")
          .attr("font-size", "30px")
          .attr("fill", "black")
      })
  </script>
</body>

</html>

单击时的文本转换 D3.js

Text Transition on Click D3.js

javascript

transition

d3.js