@redsift/d3-rs-tip

Tip for graphs using D3v4.

Usage no npm install needed!

<script type="module">
  import redsiftD3RsTip from 'https://cdn.skypack.dev/@redsift/d3-rs-tip';
</script>

README

d3-rs-tip

d3-rs-tip is a component for adding tooltips in charts made with D3, an extension of Justin Palmer's d3-tip. This component is dependent on D3 v4 (Alpha).

Builds

Circle CI

UMD from //static.redsift.io/reusable/d3-rs-tip/latest/d3-rs-tip.umd-es2015.min.js

Usage

ES6

  import { body as tip } from "@redsift/d3-rs-tip";
  
  var rtip = tip()
      .html(d => d.text)
  elmS.call(rtip);

  node.on('mouseover', rtip.show)
    .on('mouseout', rtip.hide)
  ...

If using rollup.js for a browser target, ensure d3-rs-tip is part of the global map.

Require

  var d3Tip = require("@redsift/d3-rs-tip");
  var eml = d3Tip.body();
  ...

Parameters

Name Description Expected Value
attr Sets or gets attribute value same as d3 e.g. attr('key',value|function)
style Sets or gets a style value same as d3 e.g. style('key',value|function)
direction Sets or gets direction of the tooltip one of n,s,e,w,nw,sw,ne,se
style Sets or gets the CSS wrapped with the component string of CSS properties
parent Sets or gets the parent element the tip will be appended to DOM Node (default: body)
transition Causes the tip to fade in boolean|number. If a number, the value is set at the time for the fade