Creación de gráficos de embudo utilizando SVG y el embudo D3. js-D3

Vista prévia

Descripción

El embudo D3 es una biblioteca de JavaScript para dibujar gráficos de embudo basados en SVG personalizables mediante D3. js Library.

Uso básico

Cargue el D3. js necesario de una red CDN.

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>

Cargue la biblioteca D3 del embudo JS en el documento.

<script src="path/to/d3-funnel.js"></script>

Cree un elemento DIV que servirá como contenedor para el gráfico de embudo.

<div id="funnel"></div>

Agregue una matriz de datos al gráfico de embudo.

data = [

["Applicants",
 12000],

["Pre-screened", 4000],

["Interviewed",
2500],

["Hired",



1500]
];

El código JavaScript para dibujar un gráfico de embudo predeterminado dentro del elemento DIV ' embudo '.

var chart = new D3Funnel("#funnel");
chart.draw(data);

Available options with default values.

var options = {



chart: {



width: 350,



height: 400,



bottomWidth: 1 / 3,



bottomPinch: 0,



inverted: false,



horizontal: false,



animate: 0,



curve: {





enabled: false,





height: 20,





shade: -0.4,



},



totalCount: null,


},


block: {



dynamicHeight: false,



dynamicSlope: false,



barOverlay: false,



fill: {





scale: scaleOrdinal(schemeCategory10).domain(range(0, 10)),





type: 'solid',



},



minHeight: 0,



highlight: false,


},


label: {



enabled: true,



fontFamily: null,



fontSize: '14px',



fill: '#fff',



format: '{l}: {f}',


},


tooltip: {



enabled: false,



format: '{l}: {f}',


},


events: {



click: {





block: null,



},


},

};

chart.draw(data, options);

Registro de cambios

v1.2.2 (01/27/2019)

• Reduzca significativamente el tamaño del paquete a alrededor del 27% de su tamaño original

v1.2.1 (10/14/2018)

• Se soluciona un problema en el que Dist/D3-funnel. js se minimizó junto con Dist/D3-funnel. min. js

v1.2.0 (06/26/2018)

• Agregue soporte oficial para D3. js V5