Javascript d3.js中从画布中显示的工具提示

我有一个显示在画布上的条形图列表，当我将鼠标悬停在条形图上时，会显示它们各自的值，但该值会在向下时从画布中显示出来。因此，请帮助并建议提前感谢您！！ 这是我的html文件，其中有我的工具提示实现

var margin = {
            top: 20,
            right: 0,
            bottom: 80,
            left: 40
        };
        var width = 700 - margin.left - margin.right;
        var height = 500 - margin.top - margin.bottom;


        var xScale = d3.scale.ordinal().rangeRoundBands([0, width], .1);


        var yScale = d3.scale.linear().range([height, 0]);

        var hAxis = d3.svg.axis().scale(xScale).orient('bottom')
                .ticks(4).tickSubdivide(2).tickSize(5, 5, 0)
                .tickFormat(d3.time.format("%Y-%m-%d"))

        var vAxis = d3.svg.axis().scale(yScale).orient('left');
        var tooltip = d3.select('body').append('div')
                .style('position', 'absolute')
                .style('background', '#f4f4f4')
                .style('padding', '5 15px')
                .style('border', '1px #333 solid')
                .style('border-radius', '5px')
                .style('opacity', 'o');

        var line = d3.svg.line()
                .x(function(d) {
                    return xScale(d.date);
                })
                .y(function(d) {
                    return yScale(d.value);
                })
                .interpolate("linear")
                .tension(0.9);


        function render(filterByDates) {


            d3.select('svg').remove();

            if (filterByDates) {
                selectDate = true;
                //tempData = fliterdata;
                console.log("before date fliter data", fliterdata);
                var date1 = new Date(document.getElementById('field1').value);
                var date2 = new Date(document.getElementById('field2').value);

                tempData = fliterdata.filter(function(d) {
                    console.log(date1, date2);
                    //  alert(date1);
                    return d.date >= date1 && d.date <= date2;


                });
                console.log("After date tempData", tempData);
            }


            xScale.domain(tempData.map(function(d) {
                        return d.date;
                    }) .sort(function(a, b) {
                        return a - b;
                    }
                    )
            );

            yScale.domain([0, d3.max(tempData, function(d) {
                return +d.value;
            })]);

            var svg = d3.select('#chart').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 + ")");

            svg

                    .append('g')
                    .attr("class", "x axis")
                    .attr("transform", "translate(0," + height + ")")
                    .call(hAxis)
                    .selectAll("text")
                    .style("text-anchor", "end")
                    .attr("dx", "-.8em")
                    .attr("dy", "-.55em")
                    .attr("transform", "rotate(-90)");

            svg
                    .append('g')
                    .attr("class", "yaxis")
                    .call(vAxis)

            if (chartType == 'bar') {
                svg
                        .selectAll(".bar") //makes bar
                        .data(tempData)
                        .enter().append("rect")
                        .attr("class", "bar")
                        .style("fill", "teal")
                        .attr("x", function(d) {
                            return xScale(d.date);
                        }).attr("width", xScale.rangeBand())
                        .attr("y", function(d) {


                            return yScale(d.value);
                        }).attr("height", function(d) {

                            console.log("as", d.value);
                            return height - yScale(d.value);
                        })
                        //.text(function(d){return d.value + "%";})
                        .on('mouseover', function(d) {
                            tooltip.transition()
                                    .style('opacity', 3)

                            tooltip.html(d.value)
                                    .style('left', (d3.event.pageX) + 'px')
                                    .style('top', (d3.event.pagey) + 'px')
                            d3.select(this).style('opacity', 0.5)
                        }).on('mouseout', function(d) {
                    tooltip.transition()
                            .style('opacity', 0)
                    d3.select(this).style('opacity', 1)
                });
            }

            if (chartType == 'line') {
                svg.append("path") // Add the line path.
                        .data(tempData)
                        .attr("class", "line")
                        .attr("d", line(tempData));
            }

        }

        d3.json(jsonURL, function(data) {

            myData = data; //data from json in mydata
            myData.forEach(function(d) {


                d.date = new Date(d.date);
                d.date = new Date(d.date + " UTC");
            });
       console.log( 'mydatajson', myData);
            $("#listbox").on("click", function() {

                var key = $(this).val();
                //console.log("key:", key);
                var value = $('#listbox option:selected').text();


                selectop = String(key);
                selectop= "val0"+selectop;
                fliterdata=myData.filter(function(d){
          return d[key].slice(3) ==value;
                }).map(function(d){

                   return {date:d.date,value:d[selectop].toString().replace(",",".")};

                });
                tempData=fliterdata;
                if (selectDate)
                    render(true);
            });
        });

        function selectChartType(type) {
            chartType = type;
            render(true);
        }
    </script>

var保证金={
前20名，
右:0,，
底部：80，
左：40
};
变量宽度=700-margin.left-margin.right；
变量高度=500-margin.top-margin.bottom；
var xScale=d3.scale.ordinal（）.rangeRoundBands（[0，宽度]，.1）；
var yScale=d3.scale.linear（）.range（[height，0]）；
var hAxis=d3.svg.axis（）.scale（xScale.orient（'bottom'））
.滴答声（4）.滴答声细分（2）.滴答声大小（5,5,0）
.tickFormat（d3.time.format（“%Y-%m-%d”））
var vAxis=d3.svg.axis（）.scale（yScale.orient（'left'）；
var tooltip=d3。选择（'body'）。追加（'div'））
.style（'位置'，'绝对'）
.style（'background'，'#f4'）
.style（'填充'，'5 15px'）
.style（'border'，'1px#333 solid'）
.style（'border-radius'，'5px'）
.style（'opacity'，'o'）；
var line=d3.svg.line（）
.x（功能（d）{
返回xScale（d.日期）；
})
.y（功能（d）{
返回Y刻度（d值）；
})
.插入（“线性”）
.张力（0.9）；
函数渲染（filterByDates）{
d3.选择（'svg'）.remove（）；
if（过滤水化物）{
selectDate=true；
//tempData=fliterdata；
log（“日期之前的fliter数据”，fliterdata）；
var date1=新日期（document.getElementById（'field1'）.value）；
var date2=新日期（document.getElementById（'field2'）.value）；
tempData=fliterdata.filter（函数（d）{
console.log（日期1、日期2）；
//警报（日期1）；
return d.date>=date1&&d.date嗨..周围有人吗！！