Novus/NVD3 散点图与趋势线组合图表实现详解-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00884/article/details/148464508

Novus/NVD3 散点图与趋势线组合图表实现详解

nvd3 A reusable charting library written in d3.js 项目地址: https://gitcode.com/gh_mirrors/nv/nvd3

概述

Novus/NVD3 是一个基于 D3.js 构建的可复用图表库，提供了多种常见的可视化图表类型。本文将重点分析其中的散点图与趋势线组合图表(scatterPlusLineChart)的实现方式，帮助开发者理解如何利用这个强大的工具创建复杂的数据可视化。

核心组件解析

1. 基础框架搭建

首先需要引入必要的资源文件，包括：

NVD3 的 CSS 样式文件(nv.d3.css)
D3.js 核心库(这里使用了 CDN 引入)
NVD3 主库文件(nv.d3.js)

<link href="../build/nv.d3.css" rel="stylesheet" type="text/css">
<script src="https://cdn.example.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script src="../build/nv.d3.js"></script>

2. 图表容器设置

图表容器采用 SVG 元素实现，通过 CSS 确保其占据整个父容器空间：

#test1, svg {
    margin: 0px;
    padding: 0px;
    height: 100%;
    width: 100%;
}

3. 图表初始化与配置

核心的图表初始化代码展示了 NVD3 的典型使用模式：

chart = nv.models.scatterChart()
    .showDistX(true)    // 显示X轴分布
    .showDistY(true)    // 显示Y轴分布
    .duration(300)      // 过渡动画时长
    .color(d3.scale.category10().range()); // 使用D3的10分类颜色

关键配置项说明：

showDistX/showDistY: 控制是否显示数据在坐标轴上的分布情况
duration: 控制图表更新时的动画过渡时间
color: 设置数据系列的颜色方案

4. 坐标轴格式化

chart.xAxis.tickFormat(d3.format('.02f'));
chart.yAxis.tickFormat(d3.format('.02f'));

这里使用了 D3 的格式化函数，将坐标轴刻度值格式化为保留两位小数的浮点数。

5. 数据绑定与渲染

d3.select('#test1 svg')
    .datum(nv.log(randomData(4,40)))
    .call(chart);

数据通过 datum() 方法绑定到 SVG 元素，然后调用 call(chart) 进行实际渲染。

数据生成逻辑

示例中提供了一个 randomData 函数来生成随机测试数据：

function randomData(groups, points) {
    var data = [],
        shapes = ['circle'],
        random = d3.random.normal();
    // ...生成逻辑...
}

该函数会：

创建指定数量的数据组(groups)
每组包含指定数量的数据点(points)
每个数据点包含x/y坐标、大小(size)和形状(shape)属性
为每组数据添加斜率和截距，用于趋势线计算

高级特性

1. 事件处理

NVD3 提供了丰富的事件机制：

chart.dispatch.on('renderEnd', function(){
    console.log('render complete');
});

chart.dispatch.on('stateChange', function(e) { 
    nv.log('New State:', JSON.stringify(e)); 
});

renderEnd: 图表渲染完成时触发
stateChange: 图表状态变化时触发