JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div class="container">
<h1>D3 Funnel</h1>
<div class="example">
<!-- Funnel container -->
<div id="funnel"></div>
</div>
</div>
<!-- Required D3 library -->
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.js"></script>
<!-- D3Funnel source file -->
<!-- Just for the example -->
<script src="//code.jquery.com/jquery-2.1.4.js"></script>
<script>
</script>
</body>
JavaScript
'use strict';
var _createClass = (function () {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ('value' in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
return function (Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
console.log(Constructor)
return Constructor;
};
})();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
(function (global, d3) {
/* global d3 */
/* jshint bitwise: false */
'use strict';
var D3Funnel = (function () {
/**
* @param {string} selector A selector for the container element.
*
* @return {void}
*/
function D3Funnel(selector) {
_classCallCheck(this, D3Funnel);
this.selector = selector;
// Default configuration values
this.defaults = {
width: 350,
height: 400,
bottomWidth: 1 / 3,
bottomPinch: 0,
isCurved: false,
curveHeight: 20,
fillType: 'solid',
isInverted: false,
hoverEffects: true,
dynamicArea: false,
minHeight: false,
animation: true,
label: {
fontSize: '14px',
fill: '#fff'
}
};
}
_createClass(D3Funnel, [{
key: 'destroy',
/**
* Remove the funnel and its events from the DOM.
*
* @return {void}
*/
value: function destroy() {
// D3's remove method appears to be sufficient for removing the events
d3.select(this.selector).selectAll('svg').remove();
}
}, {
key: 'draw',
/**
* Draw the chart inside the container with the data and configuration
* specified. This will remove any previous SVG...