Javascript D3，向水平条形图添加工具提示，工具提示未显示

我不熟悉D3，也不熟悉Javascript。我的条形图按原样工作，但是当我添加注释掉的代码块试图添加工具提示时，我只得到条形图以及颜色填充过渡的渲染，而不是条形图顶部的工具提示渲染。x轴、y轴和条形图中的文字将消失。我做错了什么

<script>

            var employees = []
            employees[0] = { name: "Bob", age: 31 }
            employees[1] = { name: "Doug", age: 22 }
            employees[2] = { name: "Christine", age: 58 }
            employees[3] = { name: "Sarah", age: 40 }

            var width = 700;
            var height = 800;

            //create scales
            var widthScale = d3.scale.linear()
                            .domain([0, 58])
                            .range([0, width]);

            var yScale = d3.scale.ordinal()
                        .domain(['200,000', '175,000', '150,000', '125,000', '100,000', '75,000', '50,000', '25,000', '0'])
                        .rangePoints([0, 300]);

            //create axis using scales
            var xAxis = d3.svg.axis()
                      .ticks(10)
                      .tickSize(2)
                      .scale(widthScale);

            var yAxis = d3.svg.axis()
                .orient('left')
                .tickSize(2)
                .scale(yScale)

            //colorscale for bar color transition
            var colorScale = d3.scale.linear()
                            .domain([0, 58])
                            .range(["green", "yellow"]);

            //tooltip------------------------------------------------
            var tooltip = d3.select("body")
                  .append("div")
                  .attr("class", "mytooltip")
                  .style("position", "absolute")
                  .style("background", "white")
                  .style("opacity", "0")
                  .style("display", "none");

            //create canvas
            var canvas = d3.select("body")
                        .append("svg")
                        .attr("width", width)
                        .attr("height", height)
                        .append("g") //create a group
                        .attr("transform", "translate(150, 15)") //right, down

            //create bars & add bars to canvas using data
            var bars = canvas.selectAll("rect")
                        .data(employees)
                        .enter()
                            .append("rect")
                            .attr("y", function (d, i) { return i * 25; })
                            .attr("width", 0)
                            .attr("height", 20)
                        .transition()
                            .delay(function (d, i) { return i * 100; })
                            .duration(600)
                            .attr("width", function (d) { return widthScale(d.age); })
                            .attr("height", 20)
                            .attr("fill", function (d) { return colorScale(d.age); })
                            .attr("y", function (d, i) { return i * 25; })

                            //add tooltip--------------------------------------------------
                            //.on('mouseover', function (d) {

                            //    tooltip.transition()
                            //        .style('opacity', .8)

                            //    tooltip.html(d)
                            //        .style('left', (d3.event.pageX - 35) + 'px')
                            //        .style('top', (d3.event.pageY - 30) + 'px')
                            //  });

            //add text to bars
            canvas.selectAll("text")
                .data(employees)
                .enter()
                    .append("text")
                    .attr("fill", "black")
                    .attr("y", function (d, i) { return i * 25 + 14; })
                    .text(function (d) { return d.name });

            //append a group to canvas, transform & place xAxis on canvas
            canvas.append("g")    
                .attr("transform", "translate(0, 300)")
                .call(xAxis);

            //append a group to canvas, transform & place yAxis on canvas
            canvas.append("g")
                .attr("transform", "translate(0, 0)")
                .call(yAxis);

            //add tooltip-------------------------------------------
            //canvas.append("g")
            //    .on("mouseover", function (d) {
            //        d3.select(this)
            //            .transition()
            //            .duration(500)
            //            .attr("x", function (d) { return x(d.age) - 30; })
            //            .style("cursor", "pointer")
            //  });

        </script>

var雇员=[]
员工[0]={姓名：“鲍勃”，年龄：31}
员工[1]={姓名：“Doug”，年龄：22}
员工[2]={姓名：“Christine”，年龄：58}
员工[3]={姓名：“莎拉”，年龄：40}
var宽度=700；
var高度=800；
//创建比例
var widthScale=d3.scale.linear（）
.domain（[0,58]）
.范围（[0，宽度]）；
var yScale=d3.scale.ordinal（）
.domain（['200000'，'175000'，'150000'，'125000'，'100000'，'75000'，'50000'，'25000'，'0']）
.范围点（[0，300]）；
//使用比例创建轴
var xAxis=d3.svg.axis（）
.滴答声（10）
.尺寸（2）
.比例尺（宽度比例尺）；
var yAxis=d3.svg.axis（）
.orient（'左'）
.尺寸（2）
.刻度（yScale）
//用于条颜色转换的颜色比例
var colorScale=d3.scale.linear（）
.domain（[0,58]）
.范围（[“绿色”、“黄色”）；
//工具提示------------------------------------------------
变量工具提示=d3。选择（“主体”）
.附加（“div”）
.attr（“类”、“我的工具提示”）
.style（“位置”、“绝对”）
.style（“背景”、“白色”）
.style（“不透明度”、“0”）
.样式（“显示”、“无”）；
//创建画布
var canvas=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.append（“g”）//创建一个组
.attr（“transform”，“translate（150,15）”//右，下
//创建栏&使用数据将栏添加到画布
var bar=canvas.selectAll（“rect”）
.数据（员工）
.输入（）
.append（“rect”）
.attr（“y”，函数（d，i）{返回i*25；}）
.attr（“宽度”，0）
.attr（“高度”，20）
.transition（）
.delay（函数（d，i）{返回i*100；}）
.持续时间（600）
.attr（“宽度”，函数（d）{返回宽度刻度（d.age）；}）
.attr（“高度”，20）
.attr（“fill”，函数（d）{return colorScale（d.age）；}）
.attr（“y”，函数（d，i）{返回i*25；}）
//添加工具提示--------------------------------------------------
//.on（'mouseover'，函数（d）{
//tooltip.transition（）
//.style（'opacity'，.8）
//html（d）
//.style（'left'，（d3.event.pageX-35）+'px'）
//.style（'top'，（d3.event.pageY-30）+'px'）
//  });
//向栏中添加文本
canvas.selectAll（“文本”）
.数据（员工）
.输入（）
.append（“文本”）
.attr（“填充”、“黑色”）
.attr（“y”，函数（d，i）{返回i*25+14；}）
.text（函数（d）{返回d.name}）；
//将组附加到画布，变换并将xAxis放置在画布上
canvas.append（“g”）
.attr（“转换”、“转换（0，300）”）
.呼叫（xAxis）；
//将组附加到画布，变换并将yAxis放置在画布上
canvas.append（“g”）
.attr（“转换”、“转换（0，0）”）
.呼叫（yAxis）；
//添加工具提示-------------------------------------------
//canvas.append（“g”）
//.on（“鼠标悬停”，功能（d）{
//d3.选择（本）
//.transition（）
//.持续时间（500）
//.attr（“x”，函数（d）{返回x（d.age）-30；}）
//.style（“光标”、“指针”）
//  });

将鼠标侦听器应用于工具栏，并使用css

不透明度显示/隐藏工具提示div

var员工=[{
姓名：“鲍勃”，
年龄:31
}, {
姓名：“道格”，
年龄:22
}, {
姓名：“莎拉”，
年龄:40
}];
var宽度=700；
var高度=800；
//创建比例
var widthScale=d3.scale.linear（）
.domain（[0,58]）
.范围（[0，宽度]）；
var yScale=d3.scale.ordinal（）
.domain（['200000'，'175000'，'150000'，'125000'，'100000'，'75000'，'50000'，'25000'，'0']）
.范围点（[0，300]）；
//使用比例创建轴
var xAxis=d3.svg.axis（）
.滴答声（10）
.尺寸（2）
.比例尺（宽度比例尺）；
var yAxis=d3.svg.axis（）
.orient（'左'）
.尺寸（2）
.刻度（yScale）
//用于条颜色转换的颜色比例
var colorScale=d3.scale.linear（）
.domain（[0,58]）
.范围（[“绿色”、“黄色”）；
//添加工具提示------------------------------------------------
变量工具提示=d3。选择（“主体”）
.附加（“div”）
.attr（“类别”、“d3提示”）
.style（“位置”、“绝对”）
.样式（“不透明度”，0）；
//创建画布
var canvas=d3.选择（“主体”）
.append（“svg”