Question

我正在尝试生成一些文本标签，然后将它们转换为D3图形。

伪代码：（1）在坐标0,0处生成文本标签（2）将标签转换为所需的[x，y]

但是，当我运行下面的脚本时，我在控制台日志窗口中收到以下问题：

我的代码如下：

svg.selectAll(".groups")
           .data(sampleData)
           .append("text")
           .attr("class", "label")
           .text(function(d){return d.c})
           .attr("dx",0)
           .attr("dy", 0)
           .style("fill-opacity",0)
           .each("end", function(){
                d3.selectAll(".label")
                .transition()
                .duration(2000)
                .style("fill-opacity", 1)
                .attr("dx", function(d) {
                    return x(d.x);
                     })
                .attr("dy", function(d) {
                    return y(d.y);
                     }); 
                })

你知道出了什么问题吗？两位代码运行得很好。这是让我头疼的转变。

Answer 1

你在这里不需要each。 Each为转换添加了一个侦听器，但是当您到达each函数时，您没有转换选择：

svg.selectAll(".groups")
    .data(sampleData)
    .append("text")
    .attr("class", "label")
    .text(function(d) {
        return d.c
    })
    .attr("dx", 0)
    .attr("dy", 0)
    .style("fill-opacity", 0)
    .each("end", function() {...
    //No 'transition()' before this point

（顺便说一下，你也没有＆＃34;输入＆＃34;选择，因为代码中没有enter

因此，它可以是这样的：将位置设置为零（您不需要这样做，因为默认情况下位置为零），并在转换选择中更改它们。这是演示：

＆＃13;

var svg = d3.select("svg");
var data = ["foo", "bar", "baz", "foobar", "foobaz", "barbaz"];

svg.selectAll("foo")
  .data(data)
  .enter()
  .append("text")
  .text(function(d) {
    return d
  })
  .style("fill-opacity", 0)
  .transition()
  .duration(2000)
  .style("fill-opacity", 1)
  .attr("dx", function(){ return Math.random()*280})
  .attr("dy", function(){ return 20 + Math.random()*130});

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>

＆＃13;

进行转换时，n.call不是功能问题

1 个答案: