0
我正在使用d3.js v4,难以在水平条形图和鼠标悬停上显示值,并且鼠标悬停弹出以显示数据中所需的值文本和鼠标悬停在d3.js中的条形图上并将鼠标移出值
请找到下面的代码,我已经使用
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));
我们怎样才能文本各条和鼠标悬停和鼠标进行功能上面的代码片断?
感谢 普拉萨德
嗨安迪,你可以进行更改,使数将显示在每个图表上而不是mous e Hover.on将鼠标悬停在弹出窗口中应显示数据中的“舞台”值 – user3349850
@ user3349850完成! – AndyB
嗨安迪弹出工作正常。但数字值不显示在图形栏上。 – user3349850