javascript - 进行转换时，n.call 不是函数问题

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

(顺便说一下，您也没有“输入”选项，因为代码中没有enter)

因此，它可以是这样的:将位置设置为零(您不需要这样做，因为默认情况下位置为零)，并在过渡选择中更改它们。这是演示:

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});

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