Nifty Procrastination Machine

    @redsift/d3-rs-svg

    0.6.0 • Public • Published

    d3-rs-svg

    d3-rs-svg is a component for creating a SVG 1.1 root element that is compatable with the D3 margin convention. This component is dependent on D3 v4 (Alpha).

    Builds

    Circle CI

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

    Usage

    Browser

    <script src="//static.redsift.io/reusable/d3-rs-svg/latest/d3-rs-svg.umd-es2015.min.js"></script>
    <script>
    	var svg = d3_rs_svg.html();
    	...
    </script>
    

    ES6

    import * as svg from "@redsift/d3-rs-svg";
    let eml = svg.html();
    ...
    

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

    Require

    var svg = require("@redsift/d3-rs-svg");
    var eml = svg.html();
    ...
    

    By convention, the SVG element is meant to be hosted in a HTML node, hence svg.html()

    Parameters

    Name Description Transition
    width,height SVG viewport size, px Y
    scale SVG scaling factor, floating point Y
    margin margin convention, Object or integer px Y
    classed SVG custom class N
    style SVG CSS embed N
    background Rect background color Y
    title N
    role https://www.w3.org/TR/wai-aria/roles#img N

    Parameters that support transition can be animated and chained.

    d3.select('#elm')
    	.call(svg)					// draw the SVG at default (1x) scale
    .transition().duration(1000)
    	.call(svg.scale(2.0))		// scale the SVG by 2x
    .transition().duration(333)
    	.call(svg.scale(1.0))		// bounce back after 333ms
    

    Note, this form of chaining does not work for parameters that do not support transition. Use the on('end', ... event for them.

    var el = d3.select('#elm')
    	.call(svg.style('rect{fill: yellow;}'));
    
    el.select(svg.self()).select(svg.child())
      	.append('rect')				// add a rect to the SVG we can paint with CSS
        	.attr('width', svg.childWidth())
        	.attr('height', svg.childHeight());
    
    el.transition().delay(1000).duration(0).on('end', function() {
    	 el.transition().duration(1000).delay(500)
          	.call(svg.scale(2.0).style('rect{fill: green;}'));	// this green is applied after 1s of delay but 500ms before the scale changes
    });
    

    Accessible features

    This module implements some of the features described here.

    Install

    npm i @redsift/d3-rs-svg

    DownloadsWeekly Downloads

    671

    Version

    0.6.0

    License

    MIT

    Unpacked Size

    94.4 kB

    Total Files

    14

    Last publish

    Collaborators

    • anneshackelford
    • jrivaxrs
    • mcolladoredsift
    • redsift_operations
    • raul.lorenzo.redsift
    • rahulpowar
    • randalpinto
    • njaremek
    • earada
    • jordanw7
    • jmiralles
    • nascimj
    • kitty_vandergijp
    • neilsaccardo
    • bmayolasredsift