README

D3Funnel 是一个可扩展的开源 JavaScript 库，用于使用 D3.js 库绘制漏斗图。

D3Funnel 通过多种自定义选项提供实用且视觉上吸引人的漏斗图。查看示例页面以了解几种可能的选择。

安装

要安装此库，只需包含 D3.js v4.x 和 D3Funnel

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

或者，如果您使用 Webpack 或 Browserify，可以安装 npm 包并使用 require 或 import 模块。这将为您包含一个兼容的 D3.js 版本

npm install d3-funnel --save

// CommonJS
var D3Funnel = require('d3-funnel');

// ES6
import D3Funnel from 'd3-funnel';

使用方法

要使用此库，您必须创建一个容器元素并实例化一个新的漏斗图

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

<script>
    const data = [
        ['Plants',     5000],
        ['Flowers',    2500],
        ['Perennials', 200],
        ['Roses',      50],
    ];
    const options = { block: { dynamicHeight: true } };

    const chart = new D3Funnel('#funnel');
    chart.draw(data, options);
</script>

选项

标签格式

选项 label.format 可以是函数或字符串。以下键将被字符串格式化程序替换

事件数据

基于块的事件传递一个包含以下元素的 data 对象

示例

{
	index: 0,
	node: { ... },
	value: 150,
	fill: '#c33',
	label: {
		raw: 'Visitors',
		formatted: 'Visitors: 150',
		color: '#fff',
	},
},

覆盖默认值

您可能希望覆盖默认图表选项。例如，您可能希望每个漏斗都有成比例的高度。为此，只需修改 D3Funnel.defaults 属性

D3Funnel.defaults.block.dynamicHeight = true;

如果您想同时覆盖多个属性，您可以考虑使用 lodash 的 _.merge 或 jQuery 的 $.extend

D3Funnel.defaults = _.merge(D3Funnel.defaults, {
    block: {
        dynamicHeight: true,
        fill: {
            type: 'gradient',
        },
    },
    label: {
        format: '{l}: ${f}',
    },
});

API

实例化图表后，除了 draw() 之外，还有其他方法可以访问

高级数据

您可以为任何数据点指定颜色来覆盖 block.fill.scale 和 label.fill（仅限十六进制）

var data = [
    ['Teal',      12000, '#008080', '#080800'],
    ['Byzantium', 4000,  '#702963'],
    ['Persimmon', 2500,  '#ff634d', '#6f34fd'],
    ['Azure',     1500,  '#007fff', '#07fff0'],
    //         Background ---^          ^--- Label
];

除了使用 label.format 之外，您还可以在数组中传递格式化的值

var data = [
    ['Teal',      [12000, 'USD 12,000']],
    ['Byzantium', [4000,  'USD 4,000']],
    ['Persimmon', [2500,  'USD 2,500']],
    ['Azure',     [1500,  'USD 1,500']],
];

许可证

MIT 许可证。

intelogie / d3-funnel

维护者

详细信息