Question

我一直在互联网上搜索一个简单的小提琴，用两个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的初始字体大小不会在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")
  });

完整代码：

＆＃13;

<!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>

＆＃13;

单击D3.js上的文本转换

1 个答案: