单击 D3.js 时的文本转换答案

【问题标题】：Text Transition on Click D3.js单击 D3.js 时的文本转换
【发布时间】：2016-01-12 15:17:39
【问题描述】：

我一直在互联网上搜索一个简单的小提琴，用两个 x y 坐标获取文本并将其从点 1 转换到点 2，但如果有人知道任何示例，我似乎找不到任何东西，我将不胜感激。然而到了重点这第一个sn-p代码成功地将文本绘制在点的中心。

    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 形状做过这个，它的工作方式完全相同，但无论出于何种原因，我似乎无法让它与文本一起转换，感谢任何帮助谢谢

【问题讨论】：

标签： javascript d3.js transition

【解决方案1】：

您的代码有点工作，但有点奇怪。首先，0.5px 的初始字体大小不会在 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.csv('Data.csv', function (data) { CODE HERE } ERROR: Uncaught TypeError: Cannot read property 'NewName' of undefined
@TylerCowan，这意味着您的数据绑定有问题，function(d){ return d.NewName } 中的d 未定义。为了让我进一步帮助您，您需要创建一个 jsFiddle 或 plnkr.co 来重现错误。
stackoverflow.com/questions/34815992/…我用小提琴@Mark开始了一个新问题