Javascript d3工具提示。可折叠的树。调用.on（mouseover，函数（..）时出错

我正在尝试将工具提示添加到一个可折叠的树中，我面临着这个问题。错误似乎发生在如下所示的这段代码中（我将附上完整的代码片段，以便进行调试）

错误消息：未捕获类型错误：nodeUpdate.select（…）.attr（…）.style（…）.attr（…）.on不是函数 .on函数未被识别为函数。我相信这与节点的转换有关，但我不确定如何解决这个问题

分区集装箱{
宽度：100%；
}
标题{
高度：35px；
填充：1em；
颜色：白色；
背景颜色：灰色；
清除：左；
文本对齐：居中；
证明内容：中心；
字体系列：Calibri；
字体大小：35px；
字体大小：粗体；
}
.节点{
光标：指针；
}
.节点圆{
填充：#fff；
笔画：钢蓝；
笔划宽度：1.5px；
}
.节点文本{
字体：13px无衬线；
}
.链接{
填充：无；
笔划不透明度：0.4；
笔画：紫色；
笔画宽度：3.5px；
}
#内容img{
位置：绝对位置；
底部：0px；
右：0px；
}
氢{
字体系列：Calibri；
字体大小：35px；
字体大小：粗体；
文本对齐：居中；
}
分区集装箱1跨度{
最高：50%；
证明内容：中心；
文本对齐：居中；
分区工具提示{
位置：绝对位置；
文本对齐：居中；
宽度：60px；
高度：28px；
填充：2px；
字体：12px无衬线；
背景：淡蓝色；
边界：0px；
边界半径：8px；
指针事件：无；
}
}
var保证金={
前20名，
右:120,，
底数：20，
左：120
},
宽度=1500-边距。右侧-边距。左侧，
高度=800-margin.top-margin.bottom；
var flare={
“名称”：“怡安”，
“大小”：4，
“儿童”：[{
“名称”：“印度”，
“大小”：4，
“儿童”：[{
“名称”：“ARS”，
“大小”：4，
“儿童”：[
{
“名称”：“hhh”，
“尺寸”：4
},
{
“名称”：“AAA”，
“尺寸”：4
},
{
“名称”：“BBB”，
“尺寸”：4
},
{
“名称”：“cCC”，
“尺寸”：8
},
{
“名称”：“ddd”，
“尺寸”：4
},
{
“名称”：“eee”，
“尺寸”：4
},
{
“名称”：“fff”，
“尺寸”：4
},
{
“名称”：“ggg”，
“尺寸”：4
},
{
“名称”：“hhh”，
“尺寸”：4
},
{
“名称”：“www”，
“尺寸”：4
},
{
“名称”：“qwww”，
“尺寸”：8
},
{
“名称”：“sd”，
“尺寸”：4
},
{
“名称”：“tere”，
“尺寸”：4
},
{
“名称”：“rtr”，
“尺寸”：4
},
{
“名称”：“wqw”，
“尺寸”：4
},
{
“名称”：“hrfg”，
“尺寸”：4
}
]
}]
},
{
“名称”：“新加坡”，
“大小”：4，
“儿童”：[{
“姓名”：“H&B”，
“大小”：4，
“儿童”：[{
“名称”：“aasd”，
“尺寸”：4
},
{
“名称”：“sdw”，
“尺寸”：4
},
{
“名称”：“ghrr”，
“尺寸”：4
},
{
“姓名”：“tyr”，
“尺寸”：4
},
{
“名称”：“wew”，
“尺寸”：4
},
{
“姓名”：“ere”，
“尺寸”：4
},
{
“名称”：“wew”，
“尺寸”：4
},
{
 // Transition nodes to their new position.
          var nodeUpdate = node.transition()
              .duration(duration)
              .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });

          nodeUpdate.select("circle")
              .attr('r',function(d) { return d.size;  })
              .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; })
              .attr('cursor', 'pointer')
              .on("mouseover", mouseover)
              .on("mousemove", function(d){mousemove(d);})
              .on("mouseout", mouseout);

              // Transition nodes to their new position.
              var nodeUpdate = node.transition()
                .duration(duration)
                .attr( .... });

              nodeUpdate.select("circle")
                .attr(......)
                .on("mouseover", mouseover)
                .on("mousemove", function(d) {
                  mousemove(d);
                })
                .on("mouseout", mouseout);

nodeUpdate.select("circle") 

d3.selectAll("circle")