CODEWITHSUNDEEP
javascriptd3.js
user3349850
user3349850

Reputation: 225

text & mouse over and mouse out value on bar graph in d3.js

I was using d3.js v4 and having difficulty in showing the value on horizontal bar chart and mouse over and mouse out pop to show the desired value from data

please find the below code i have used 

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

How can we text to each bar and mouse hover and mouse out functionality for the above code snippet?

Thanks Prasad

Upvotes: 0

Views: 2123

Answers (1)

NovaPenguin
NovaPenguin

Reputation: 463

Updated per request:

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>

The tooltip was shamelessly stolen from here: https://bl.ocks.org/mbostock/1087001

Upvotes: 1

Related Questions