d3-tooltip

0.0.1 • Public • Published

JavaScript - d3-tooltip

This is a JavaScript d3 tooltip component.

Browserify

npm install --save d3-tooltip

Component

component install jprichardson/d3-tooltip

Example

var d3 = require('d3')
  , d3tooltip = require('d3-tooltip')
 
var yourDataArray = [.....]
 
var svg = d3.select('#graph').append('svg')
 
var tooltip = d3tooltip(d3) //create new tooltip
 
svg.selectAll("circle")
    .data(yourDataArray)
    .enter()
    .append("circle")
      .attr("r", 3)
      .attr("cx", function(d, i) {
        //return x position, typically you use a scale here
      })
      .attr("cy", function(d) {
        //return y position, could use a scale here as well
      })
      .on("mouseover", function(d) {
        var html = d.toString()
 
        tooltip.html(html)
        tooltip.show()    
      })
      .on("mouseout", tooltip.hide)

Credits

This code is almost exclusively based upon this article: http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html

License

(MIT License)

Copyright 2013, JP Richardson jprichardson@gmail.com

Readme

Keywords

Package Sidebar

Install

npm i d3-tooltip

Weekly Downloads

126

Version

0.0.1

License

none

Last publish

Collaborators

  • jprichardson