https://github.com/rabelais88/d3-quicktool

https://github.com/rabelais88/d3-quicktool

Last synced: 19 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/rabelais88/d3-quicktool
• Owner: rabelais88
• Created: 2020-04-27T05:13:26.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T04:28:52.000Z (almost 2 years ago)
• Last Synced: 2024-10-10T05:37:04.574Z (about 1 month ago)
• Language: JavaScript
• Size: 3 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 18
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# d3-quicktool

d3 utility functions for faster development

- [github](https://github.com/rabelais88/d3-quicktool)

```javascript

import {

  trans,

  move,

  rgba,

  shortenText,

  move,

  moveCustom,

} from 'd3-quicktool';

const node = d3.select('mynode');

node.attr('transform', trans(x, y, scale));

node.call(move, (d, el, a) => [d.x, d.y]);

node.call(move, (d, el, a) => [d.x, d.y, d.scale]);

node.call(move, () => [10,10]);

node.attr('fill', rgba(0, 0, 0, 1));

node.attr('text', (d) => shortenText(d, 3)); // 'aaaaaa' -> 'aaa...'

// can't use transition with move, moveCustom function

node.call(moveCustom, (d) => trans(d.x, d.y));

import { addSvgStyle, addOutlineStyle, setSize, addHitBox } from 'd3-quicktool';

const svg = d3.create('svg');

// styleCss should be a style in a plain HTML

// styleCss is used for svg -> canvas or file download

svg.call(addSvgStyle, styleCss);

svg.call(addOutlineStyle, {

  className: 'outlined',

  strokeWidth: '1px',

  stroke: 'white',

});

svg.append('text').attr('class', 'outlined'); // will appear as outlined text

const myrect = svg.append('rect').call(setSize, 10, 10); // 10x10 size rect

myrect.call(addHitBox, {

  // x: 0 // x and y are omittable

  // y: 0

  width: 10,

  height: 10,

  clicked: () => {},

  mouseEnter: () => {},

  mouseLeave: () => {},

}); // draw hitbox

```