文本和鼠標懸停在d3.js中的條形圖上並將鼠標移出值

Question

我正在使用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)); 

我們怎樣才能文本各條和鼠標懸停和鼠標進行功能上面的代碼片斷？

感謝 普拉薩德

Answer 1

每個請求更新：

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('g') 
 
    .attr('class', 'group') 
 
    .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' 
 
    }) 
 
    .on("mouseover", d => mouseover(d)) 
 
    .on("mousemove", mousemove) 
 
    .on("mouseout", mouseout) 
 
    .attr("height", y.bandwidth()); 
 

 
svg.selectAll(".group") 
 
    .append('text') 
 
    .attr('class', 'count') 
 
    .text(d => d.Number) 
 
    .attr("x", function(d) { 
 
    return x(d.Number) + 5; 
 
    }) 
 
    .attr("y", function(d) { 
 
    return y(d.Issue) + y.bandwidth()/2 + 5; 
 
    }) 
 

 
// 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)); 
 

 
var div = d3.select("body").append("div") 
 
    .attr("class", "tooltip") 
 
    .style("display", "none"); 
 

 
function mouseover(d) { 
 
    div.style("display", "inline"); 
 
    div.text(d.Stage) 
 
} 
 

 
function mousemove() { 
 
    div 
 
    .style("left", (d3.event.pageX - 34) + "px") 
 
    .style("top", (d3.event.pageY - 12) + "px"); 
 
} 
 

 
function mouseout() { 
 
    div.style("display", "none"); 
 
}

.tooltip { 
 
    position: absolute; 
 
    text-align: center; 
 
    width: 60px; 
 
    height: 12px; 
 
    padding: 8px; 
 
    margin-top: -20px; 
 
    font: 10px sans-serif; 
 
    background: #ddd; 
 
    pointer-events: none; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.8.0/d3.js"></script> 
 

 
<body> 
 
    <div id='barchart'></div> 
 
</body>

技能說明是無恥地從這裏被盜： https://bl.ocks.org/mbostock/1087001