Angularjs Tootip无法使用d3.js处理条形图

我正在使用d3.js与angularJs集成。但它不工作，在调用tip.show和tip.hide时出错

var chart = d3.select(element[0])
     .append("svg")
     .attr("width", width + margin.left + margin.right)
     .attr("height", height + margin.top + margin.bottom)
     .append("g")
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

chart.call(tip);

chart.selectAll(".bar")
    .data(data)
    .enter().append("rect")
    .attr("class", function(d) { return d.value < 0 ? "bar negative" : "bar positive"; })    
    .attr("x", function(d) { return x(d.name); })
    .attr("y", height)
    .attr("height", 0)
    .transition().duration(2000)
    .attr("y", function(d) {return y(Math.max(0, d.value)); })
    .attr("height", function(d) {return Math.abs(y(d.value) - y(0)); })    
    .attr("width", x.rangeBand())
    .on('mouseover', tip.show)
    .on('mouseout', tip.hide); 

var图表=d3.选择（元素[0]）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
图表.通话（提示）；
图表。选择全部（“.bar”）
.数据（数据）
.enter（）.append（“rect”）
.attr（“类”，函数（d）{返回d.value<0？“条负”：“条正”；}）
.attr（“x”，函数（d）{返回x（d.name）；}）
.attr（“y”，高度）
.attr（“高度”，0）
.transition（）.持续时间（2000年）
.attr（“y”，函数（d）{返回y（Math.max（0，d.value））；}）
.attr（“height”，函数（d）{return Math.abs（y（d.value）-y（0））；}）
.attr（“宽度”，x.rangeBand（））
.on（'mouseover'，tip.show）
.on（'mouseout'，tip.hide）；

完整的工作示例以小提琴的形式给出

---

我想你可以画一个div来做这个把戏。 我不确定这是不是一个好办法

var div = d3.select('body').append('div')   
.attr('class', 'tooltip')               
.style('opacity', 0);

---

您正在每个转换上绑定鼠标侦听器。将侦听器绑定到所选内容

 chart.selectAll(".bar")
      .data(data)
      .enter().append("rect")
      .attr("class", function(d) { return d.value < 0 ? "bar negative" : "bar positive"; })    
      .attr("x", function(d) { return x(d.name); })
      .attr("y", height)
      .attr("height", 0)
      .on('mouseover', tipX.show) //Moved up
      .on('mouseout', tipX.hide)  //Moved up
      .transition().duration(2000)
      .attr("y", function(d) {return y(Math.max(0, d.value)); })
      .attr("height", function(d) {return Math.abs(y(d.value) - y(0)); })    
      .attr("width", x.rangeBand());

图表。选择全部（“.bar”）
.数据（数据）
.enter（）.append（“rect”）
.attr（“类”，函数（d）{返回d.value<0？“条负”：“条正”；}）
.attr（“x”，函数（d）{返回x（d.name）；}）
.attr（“y”，高度）
.attr（“高度”，0）
.on（'mouseover'，tipX.show）//上移
.on（'mouseout'，tipX.hide）//向上移动
.transition（）.持续时间（2000年）
.attr（“y”，函数（d）{返回y（Math.max（0，d.value））；}）
.attr（“height”，函数（d）{return Math.abs（y（d.value）-y（0））；}）
.attr（“宽度”，x.rangeBand（））；

还要更新此代码，因为d在这里是一个对象

 var tip = d3.tip()
       .attr('class', 'd3-tip')
       .offset([-10, 0])
       .html(function(d) {
            //Changed d to d.value
            return "<strong>Frequency:</strong> <span style='color:red'>" + d.value + "</span>";
       });

var tip=d3.tip（）
.attr（'class'，'d3 tip'）
.偏移量（[-10,0]）
.html（函数（d）{
//将d更改为d值
返回“频率：”+d.value+”；
});

以下是最新的