Javascript 在条形图上添加工具提示无效（d3.js和jquery工具提示UI）

因此，我使用d3.js生成一个圆条形图，并使用jquery工具提示UI（）

我试图在图表的每个栏上方生成一个动态工具提示。 在工具提示jqueryui中，title属性是将显示在工具提示中的消息，对吗

当鼠标悬停事件发生时，我希望数据集“lyricset”出现在每个圆形条的工具提示中（我认为这是工具提示jQuery UI的默认设置）

以下是我的代码：

<script type="text/javascript"> 
   var dataset = [ 5, 10, 13, 7, 21, 24, 15, 16];
   var lyricset=[{"song":"Victory","prev":"A", "cur":"B", "next":"C"},
                      {"song":"Fame","prev":"a", "cur":"b", "next":"c"},
                      {"song":"Lemon","prev":"1", "cur":"2", "next":"3"}
                     ];
   var bar = d3.select("body").selectAll("div")
            .data(dataset)
            .enter()
            .append("div")
            .attr("class", "bar")
            .style("height", function(d) {
                var barHeight = d * 5;
                return barHeight + "px";
            })
            .style("width", function(d) {
                var barWidth = d * 5;
                return barWidth + "px";
            })
            .on("click", showDiv);

    $(function() {
        $( document ).tooltip({
            position: {
                of: "div.bar",
                my: "center bottom-20",
                at: "center top",
                using: function( position, feedback ) {
                  $( this ).css( position );
                  $( "<div>" )
                    .addClass( "arrow" )
                    .addClass( feedback.vertical )
                    .addClass( feedback.horizontal )
                    .appendTo( this );
                }
              }
            });               


            d3.select("body").selectAll("p")
            .data(lyricset)
            .enter()
            .append("p").select("p")
            .append("a").select("a")
            .attr("title", d);
          });

var数据集=[5,10,13,7,21,24,15,16]；
var lyricset=[{“song”：“胜利”，“prev”：“A”，“cur”：“B”，“next”：“C”}，
{“宋”：“名”，“上一个”：“a”，“cur”：“b”，“下一个”：“c”}，
{“歌曲”：“柠檬”，“上一个”：“1”，“当前”：“2”，“下一个”：“3”}
];
var bar=d3.选择（“主体”）.选择全部（“div”）
.数据（数据集）
.输入（）
.附加（“div”）
.attr（“类”、“条”）
.样式（“高度”，功能（d）{
var barHeight=d*5；
返回杆高度+“px”；
})
.样式（“宽度”，功能（d）{
var barWidth=d*5；
返回条宽度+“px”；
})
。打开（“单击”，showDiv）；
$（函数（）{
$（文档）。工具提示({
职位：{
“div.bar”，
我的：“中底20”，
在“中心顶端”，
使用：功能（位置、反馈）{
$（this.css（position）；
$( "" )
.addClass（“箭头”）
.addClass（feedback.vertical）
.addClass（feedback.horizontal）
.附于（本）；
}
}
});               
d3.选择（“主体”）。选择全部（“p”）
.数据（lyricset）
.输入（）
.附加（“p”）。选择（“p”）
.附加（“a”）.选择（“a”）
.attr（“标题”，d）；
});

---

有了这段代码，我的条形图是根据数据集生成的，但我的工具提示根本没有显示出来。我已经看了一整天的代码，我知道有些地方不对劲，但不确定到底是什么地方出了问题。

你能添加一个工作的JSFIDLE吗？见鬼！我不太清楚为什么条形图停止工作（在JSFIDLE中没有显示，但在编辑器和我的浏览器中都可以正常工作）。我想你忘了加d3了。这个看起来对吗？对它看起来是正确的（对于条形图）。我忘了加上d3。但工具提示仍然存在问题。