Javascript 文本及；d3.js中条形图上的鼠标悬停和鼠标移出值

我使用的是d3.js v4，很难在水平条形图上显示值，很难通过鼠标悬停和鼠标弹出来显示数据中所需的值

请查找我使用过的以下代码

            var data = [{Issue:"Other",Number:808,Stage:"A"},
{Issue:"Other1",Number:80,Stage:"A"},
{Issue:"Other2",Number:8,Stage:"A"},
{Issue:"Other3",Number:67,Stage:"A"},
{Issue:"Other4",Number:45,Stage:"A"},
{Issue:"Other5",Number:9,Stage:"A"},
{Issue:"Other6",Number:60,Stage:"A"},
{Issue:"Other7",Number:8,Stage:"A"}];


var margin = {top: 15, right: 30, bottom: 40, left: 400},
    width = 1200 - margin.left - margin.right,
    height = 300 - margin.top - margin.bottom;

    var y = d3.scaleBand()
    .range([height, 0])
    .padding(0.1);

var x = d3.scaleLinear()
    .range([0, width]);

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

data.forEach(function(d) {
    d.Number = +d.Number;
  });

x.domain([0, d3.max(data, function(d){ return d.Number; })])
y.domain(data.map(function(d) { return d.Issue; }));

svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("width", function(d) {return x(d.Number); } )
.attr("y", function(d) { return y(d.Issue); })
.style("fill",function(d) { 
    if(d.Stage=='I')
    return '#3dc778'
    if(d.Stage=='B')
        return '#e52929'
        if(d.Stage=='U')
            return '#3021fd'
            if(d.Stage=='A')
                return '#eefd21'
 })
.attr("height", y.bandwidth());

// add the x Axis
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));

// add the y Axis
svg.append("g")
.call(d3.axisLeft(y));

我们如何为上面的代码片段向每个条发送文本，并使用鼠标悬停和鼠标移出功能

谢谢 Prasad根据请求更新：

var数据=[{
问题：“其他”，
电话：808，
阶段：“A”
},
{
问题：“其他1”，
电话：80，
阶段：“A”
},
{
问题：“其他2”，
编号：8，
阶段：“A”
},
{
问题：“其他3”，
编号：67，
阶段：“A”
},
{
问题：“其他4”，
电话：45，
阶段：“A”
},
{
主题：“其他5”，
编号：9，
阶段：“A”
},
{
问题：“其他6”，
编号：60，
阶段：“A”
},
{
问题：“其他7”，
编号：8，
阶段：“A”
}
];
var保证金={
前15名，
右:30,，
底数：40，
左：400
},
宽度=1200-margin.left-margin.right，
高度=300-margin.top-margin.bottom；
变量y=d3.scaleBand（）
.范围（[高度，0]）
.填充（0.1）；
var x=d3.scaleLinear（）
.范围（[0，宽度]）；
var svg=d3。选择（“条形图”）。追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
data.forEach（函数（d）{
d、 数字=+d.数字；
});
x、 域（[0，d3.max（数据，函数（d））{
返回d.编号；
})])
y、 域（data.map）（函数（d）{
返回d.问题；
}));
svg.selectAll（“.bar”）
.数据（数据）
.输入（）
.append（'g'）
.attr（'类'，'组'）
.append（“rect”）
.attr（“宽度”，函数（d）{
返回x（d.Number）；
})
.attr（“y”，函数（d）{
返回y（d.问题）；
})
.样式（“填充”，功能（d）{
如果（d.Stage=='I'）
返回“#3dc778”
如果（d.Stage='B'）
返回“#e52929”
如果（d.Stage='U'）
返回“#3021fd”
如果（d.Stage='A'）
返回“#eefd21”
})
.on（“鼠标悬停”，d=>mouseover（d））
.on（“mousemove”，mousemove）
.on（“mouseout”，mouseout）
.attr（“高度”，y.带宽（））；
svg.selectAll（“.group”）
.append（'文本'）
.attr（'class'，'count'）
.text（d=>d.Number）
.attr（“x”，函数（d）{
返回x（d.Number）+5；
})
.attr（“y”，函数（d）{
返回y（d.Issue）+y.带宽（）/2+5；
})
//添加x轴
svg.append（“g”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（x））；
//添加y轴
svg.append（“g”）
.调用（d3.左（y））；
var div=d3.选择（“主体”）.追加（“div”）
.attr（“类”、“工具提示”）
.样式（“显示”、“无”）；
功能鼠标盖（d）{
div.style（“显示”、“内联”）；
部门文本（d阶段）
}
函数mousemove（）{
div
.style（“左”（d3.event.pageX-34）+“px”）
.style（“top”，（d3.event.pageY-12）+“px”）；
}
函数mouseout（）{
分区样式（“显示”、“无”）；
}

。工具提示{
位置：绝对位置；
文本对齐：居中；
宽度：60px；
高度：12px；
填充：8px；
利润上限：-20px；
字体：10px无衬线；
背景：ddd；
指针事件：无；
}

您好，安迪，您是否可以进行更改，使数字显示在每个图形上，而不是鼠标悬停。鼠标悬停时，弹出窗口中应显示“阶段”值data@user3349850完成！“您好，安迪弹出窗口工作正常。但是图形栏上没有显示数值。@user3349850抱歉，您根本不需要标签。他们回来了（没有悬停）