title: get values of single candlestick in mouseover in candlestick chart in d3
body: <p>I am trying to get the values like high low close and open of a single candlestick in candlestick chart in d3. On mouseover I want these values. For that I need to uniquely identify each candlestick so that on mouseover I can get values for that specific candlestick. My code is as below. 
  I tried appending group element to every candlestick but was unsuccessful.</p>
  
  <pre><code>$(document).ready(function () {
          //alert("In document ready");
          var option = '&lt;option value="0"&gt;--select --&lt;/option&gt;';      //filling the drop down for company list
          d3.csv("companies.csv", function (data) {
              //var z = "a.us.txt";
              //console.log(data.z);
  
              for (var i = 0; i &lt; data.length; i++) {
                  //  console.log(data[i].companies);
                  option += '&lt;option Value="' + data[i].companies + '"&gt;' + data[i].companies + '&lt;/option&gt;'
              }
  
              $('#det').html(option);
  
          });
  
          createCandleStickChart();           // Creating candle chart
  
      })
  
      var margin, width, height, parseDate, x, y, candlestick, xAxis, yAxis, svg;
      var link = "https://raw.githubusercontent.com/Diksha1206/Stocks-Viz/master/Data/";
      var selectedcompany;
  
  
      function createCandleStickChart() {
  
           margin = { top: 20, right: 20, bottom: 30, left: 50 },     //Setting margin width and height
              width = 960 - margin.left - margin.right,
              height = 500 - margin.top - margin.bottom;
  
           parseDate = d3.timeParse("%Y-%m-%d");              // Parsing the data as year month and day
  
          x = techan.scale.financetime()                      // Scaling a axis.Setting x from 0 to width defined 
                  .range([0, width]);                         //techan.scale.financetime plots only points available in the data's date domain without linear (weekend, market holiday) gaps.
  
           y = d3.scaleLinear()                           // Scaling y-axis to Linear timescale
                  .range([height, 0]);
  
           candlestick = techan.plot.candlestick()     //techan.plot.candlestick - construct a candlestick.           
                  .xScale(x)                      
                  .yScale(y);
  
           xAxis = d3.axisBottom()                //Creating x-axis
                  .scale(x);
  
           yAxis = d3.axisLeft()              //Creating y axis
                  .scale(y);
  
           svg = d3.select("#candle").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 + ")");
  
           svg.on("brush", function (value) {
  
               alert("Clicked in brush");
           })
      }
  
      $('select[name="Companydropdown"]').change(function () {
  
          document.getElementById("candle").innerHTML = "";
          selectedcompany = $(this).val();
          var linktogo = link + selectedcompany;
          //alert(linktogo);
  
          createCandleStickChart();
  
          d3.csv(linktogo, function (error, data) {           //providing the link of the selected data from the dropdown
              var accessor = candlestick.accessor();
              data = data.slice(0, 200).map(function (d) {
                  return {
                      date: parseDate(d.Date),
                      open: +d.Open,
                      high: +d.High,
                      low: +d.Low,
                      close: +d.Close,
                      volume: +d.Volume
                  };
              }).sort(function (a, b) { return d3.ascending(accessor.d(a), accessor.d(b)); });
  
              //svg.selectAll('.candlestick')
              //.data(data)
              //.enter().append('g')
              //.attr('class', 'candlestick')
              //.on('mouseover', function (d) {
              //    console.log(d);
              //})
  
  
              svg.append("g")
                      .attr("class", "candlestick")
  
              svg.append("g")
                      .attr("class", "x axis")
                      .attr("transform", "translate(0," + height + ")");
  
              svg.append("g")
                      .attr("class", "y axis")
                      .append("text")
                      .attr("transform", "rotate(-90)")
                      .attr("y", 6)
                      .attr("dy", ".71em")
                      .style("text-anchor", "end")
                      .text("Price ($)");
              draw(data.slice(0, data.length - 20));
  
              d3.select("button").on("click", function () { draw(data); }).style("display", "inline");
          });
      })    
      function draw(data) {
          x.domain(data.map(candlestick.accessor().d));
          y.domain(techan.scale.plot.ohlc(data, candlestick.accessor()).domain());          svg.selectAll("g.candlestick").datum(data).append("g").call(candlestick).on('mouseover', function (d) {
              alert("Mouseover");
              console.log("clicking on", d);
          });
  
          svg.selectAll("g.x.axis").call(xAxis);
          svg.selectAll("g.y.axis").call(yAxis);
      }
  </code></pre>
  
  <p>I am selecting a company from the drop down and then changing the data according to selection. Is there any way that I can get value for a single candlestick on mouseover?</p>