Hey, Tried using this for getting tooltips on the column bars but di

Hey <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url=

Tooltips on Column Chart bars about d4 HOT 2 CLOSED

akshayakrsh commented on July 20, 2024

Tooltips on Column Chart bars

from d4.

Comments (2)

heavysixer commented on July 20, 2024

Hey @akshayakrsh, due to the dynamic nature of d3/d4 the tooltip elements need to be instantiated in a particular way. Check the bottom of this example:
http://visible.io/charts/scatter/tooltips.html

Specifically:

  // Note: Bootstrap's tooltips are opt-in meaning you need to first initialize
  // the plugin before you can start to use it. For this reason, we must first
  // initialize the tooltip looking for our svg circles with the dot class.
  // Otherwise it would take two mouseovers before the tooltip showed up.
  $('div').tooltip({
    selector: '.dot'
  });

If this doesn't work then please post a jsfiddle example online and I'll try and help you debug.

from d4.

akshayakrsh commented on July 20, 2024

The solution you gave up was not exactly the requirement. Consider the following code, which works perfectly:

<html>
  <head>
    <title>Hello D4</title>
    <link rel="stylesheet" href="d4.css" />
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  </head>
  <body>
    <div id="chartHolder"></div>
    <script src="jquery.min.js"></script>
    <script src="d3.min.js"></script>
    <script src="d4.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script type="text/javascript">
      var yLabel = 'Years'
      var dataObj = [
        { x : '2010', y : 5 },
        { x : '2011', y : 15 },
        { x : '2012', y : 20 }
      ];
      var chart = d4.charts.column()
        .mixout('yAxis')
        .margin({top: 20, bottom:20, left: 0, right: 0})
        .using('bars', function(bar) {
          // Note: d4 proxies the "on" function to d3, so it will work just like
          // it does in d3
          bar.on('mouseover', function(d) {
            var title = d.x + '<br />' + yLabel + ': ' + d.y;
            $(this).tooltip({
              container: 'body',
              placement: 'auto',
              html: true,
              title: title
            });

          });
        });

      d3.select('#chartHolder')
        .datum(dataObj)
        .call(chart);
    </script>
  </body>
</html>

The problem was, I was using bootstrap 2.3.2 which required the placement attribute of the tooltip to be set to left/top, etc. instead of auto (it lead the placement of the tooltip holder to be at top-left corner).

Thanks for you help anyways.

from d4.

Recommend Projects