title: Add the data column to the tooltip text
body: <p>I am new to D3js. My tooltip on my stacked barchart is showing only the column value. However, I would like to add the column name as well.</p>
  
  <p>I followed the example from <a href="https://bl.ocks.org/mjfoster83/7c9bdfd714ab2f2e39dd5c09057a55a0" rel="nofollow noreferrer">https://bl.ocks.org/mjfoster83/7c9bdfd714ab2f2e39dd5c09057a55a0</a> to create a stacked barchart with tooltip.</p>
  
  <p>HTML Section:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;meta charset ="utf-8"&gt;
  &lt;script src="./js/d3.v5.min.js"&gt;&lt;/script&gt;
  &lt;style&gt;
  
  body {
      margin: auto;
      width: 650px;
      font: 12px arial;
  }
  
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;svg id="chart" width="1900" height="900"&gt;&lt;/svg&gt;
  
  Select type:
  &lt;select id="type"&gt;&lt;/select&gt;
  
  &lt;input type="checkbox" id="sort"&gt;
  Toggle sort
  
  &lt;/body&gt;
  &lt;/html&gt;
  
  </code></pre>
  
  <p>Below is the D3js:</p>
  
  <pre><code>d3.csv("./tmp/20191104154746.csv").then(d =&gt; chart(d))
  
  function chart(csv) {
  
      var keys = csv.columns.slice(2);
  
      var type   = [...new Set(csv.map(d =&gt; d.Type))]
      var pmids = [...new Set(csv.map(d =&gt; d.PMID))]
  
      var options = d3.select("#type").selectAll("option")
          .data(type)
      .enter().append("option")
          .text(d =&gt; d)
  
      var svg = d3.select("#chart"),
          margin = {top: 35, left: 35, bottom: 0, right: 0},
          width = +svg.attr("width") - margin.left - margin.right,
          height = +svg.attr("height") - margin.top - margin.bottom;
  
      var x = d3.scaleBand()
          .range([margin.left, width - margin.right])
          .padding(0.1)
  
      var y = d3.scaleLinear()
          .rangeRound([height - margin.bottom, margin.top])
  
      var xAxis = svg.append("g")
          .attr("transform", `translate(0,${height - margin.bottom})`)
          .attr("class", "x-axis")
  
      var yAxis = svg.append("g")
          .attr("transform", `translate(${margin.left},0)`)
          .attr("class", "y-axis")
  
      var z = d3.scaleOrdinal()
          .range(["#000eec","#0016e6","#0036df",])
          .domain(keys);
  
      update(d3.select("#type").property("value"), 0)
  
      function update(input, speed) {
  
          var data = csv.filter(f =&gt; f.Type == input)
  
          data.forEach(function(d) {
              d.total = d3.sum(keys, k =&gt; +d[k])
              return d
          })
  
          y.domain([0, d3.max(data, d =&gt; d3.sum(keys, k =&gt; +d[k]))]).nice();
  
          svg.selectAll(".y-axis").transition().duration(speed)
              .call(d3.axisLeft(y).ticks(null, "s"))
  
          data.sort(d3.select("#sort").property("checked")
              ? (a, b) =&gt; b.total - a.total
              : (a, b) =&gt; pmids.indexOf(a.PMID) - pmids.indexOf(b.PMID))
  
          x.domain(data.map(d =&gt; d.PMID));
  
          svg.selectAll(".x-axis").transition().duration(speed)
              .call(d3.axisBottom(x).tickSizeOuter(0))
  
          var group = svg.selectAll("g.layer")
              .data(d3.stack().keys(keys)(data), d =&gt; d.key)
  
          group.exit().remove()
  
          group.enter().append("g")
              .classed("layer", true)
              .attr("fill", d =&gt; z(d.key));
  
          var bars = svg.selectAll("g.layer").selectAll("rect")
              .data(d =&gt; d, e =&gt; e.data.PMID);
  
          bars.exit().remove()
  
          bars.enter().append("rect")
              .attr("width", x.bandwidth())
            .on("mouseover", function() { tooltip.style("display", null); })
          .on("mouseout", function() { tooltip.style("display", "none"); })
          .on("mousemove", function(d) {
              var xPosition = d3.mouse(this)[0] - 5;
              var yPosition = d3.mouse(this)[1] - 5;
              tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")");
              tooltip.select("text").text(d[1]-d[0]);
          })
              .merge(bars)
            .transition().duration(speed)
              .attr("x", d =&gt; x(d.data.PMID))
              .attr("y", d =&gt; y(d[1]))
              .attr("height", d =&gt; y(d[0]) - y(d[1]))
  
          var text = svg.selectAll(".text")
          .data(data, d =&gt; d.PMID);
      }
  
      var select = d3.select("#type")
          .on("change", function() {
              update(this.value, 800)
          })
  
      var checkbox = d3.select("#sort")
          .on("click", function() {
              update(select.property("value"), 800)
          })
  
          // Prep the tooltip bits, initial display is hidden
   var tooltip = svg.append("g")
       .attr("class", "tooltip")
       .style("display", "none");
  
   tooltip.append("rect")
       .attr("width", 60)
       .attr("height", 20)
       .attr("fill", "white")
       .style("opacity", 0.5);
  
   tooltip.append("text")
       .attr("x", 30)
       .attr("dy", "1.2em")
       .style("text-anchor", "middle")
       .attr("font-size", "12px")
       .attr("font-weight", "bold");
  }
  
  
  </code></pre>
  
  <p>The CSV file:</p>
  
  <pre><code>PMID,Type,Total cholesterol,LDL cholesterol,HDL cholesterol
  18617736,Control,5.7,3.9,1.2
  18617736,AD,5.7,3.6,1.4
  22134919,Control,48.104,0,0
  22134919,AD,50.3,0,0
  22134919,Control,45.315,0,0
  22134919,AD,42.295,0,0
  22134919,Control,45.847,0,0
  22134919,AD,43.655,0,0
  27255810,Control,0,0,0
  27255810,AD,0,0,0
  27255810,MCI,0,0,0
  27255810,Control,0,0,0
  27255810,AD,0,0,0
  27255810,MCI,0,0,0
  12244089,Control 1,0,0,0
  12244089,AD 1,0,0,0
  12244089,Control 2,0,0,0
  12244089,AD 2,0,0,0
  12244089,Control 1 Follow up,0,0,0
  12244089,AD 1 Follow up,0,0,0
  </code></pre>
  
  <p>I have tried adding the d.data.id as follows to the tooltip but it is coming up as undef:</p>
  
  <pre><code>  .on("mousemove", function(d) {
              var xPosition = d3.mouse(this)[0] - 5;
              var yPosition = d3.mouse(this)[1] - 5;
              tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")");
              tooltip.select("text").text(d[1]+d.data.id);
          })
  
  </code></pre>