用 D3.js 画一个手机专利关系图, 看看苹果,三星,微软间的专利纠葛

用 D3.js 画一个手机专利关系图, 看看苹果,三星,微软间的专利纠葛

前言

本文灵感来源于Mike Bostock 的一个 demo 页面

原 demo 基于 D3.js v3 开发, 笔者将其使用 D3.js v5 进行重写, 并改为使用 ES6 语法.

源码: github

在线演示 : demo

效果

可以看到, 上图左上角为图例, 中间为各个手机公司之间的专利关系图.

图例中有三种线段:

• 红色实线: 正在进行专利诉讼 (箭头指向方为被诉讼方)
• 蓝色虚线: 诉讼已经结束
• 绿色实线: 专利已经授权

实现

下面让我们看看如何一步步实现上图的效果.

分析数据

[
  { source: 'Microsoft', target: 'Amazon', type: 'licensing' },
  { source: 'Microsoft', target: 'HTC', type: 'licensing' },
  { source: 'Samsung', target: 'Apple', type: 'suit' },
  { source: 'Motorola', target: 'Apple', type: 'suit' },
  { source: 'Nokia', target: 'Apple', type: 'resolved' },
  { source: 'HTC', target: 'Apple', type: 'suit' },
  { source: 'Kodak', target: 'Apple', type: 'suit' },
  { source: 'Microsoft', target: 'Barnes & Noble', type: 'suit' },
  { source: 'Microsoft', target: 'Foxconn', type: 'suit' },
  ...
]

可以看到, 每一条数据都是由以下几部分组成:

• source : 诉讼方的公司名称
• target : 被诉讼方的公司名称
• type : 当前诉讼状态

需要注意的是: 有一些公司 (如 Apple, Microsoft ) 同时参与了多起诉讼案件, 但我们在数据可视化时只会为每一个公司分配一个节点, 然后用连线表示各个公司之间的关系.

数据可视化最重要的就是数据和图像之间的映射关系, 本例中我们的可视化的逻辑为:

• 将每一个公司作为图中的一个圆形节点
• 将每一条诉讼关系表示为两个圆形节点之间的连线

公司 ==> 圆形节点

诉讼关系 ==> 连线

技术分析

要实现可以拖动, 自动布局的网络图, 本 demo 用到了 D3.js 中的 d3-force 和 d3-drag , 当然还有最基础的 d3-selection.

(为了方便搭建用户界面, 使用了 Vue 作为前端框架. 但 Vue 并不对数据可视化逻辑产生影响, 不使用也不会对我们的实现造成影响.)

代码实现

现在让我们进入代码部分, 首先我们画出每个公司代表的圆形节点:

上面说到了, 原始数据中, 有部分公司多次出现在不同的诉讼关系中, 而我们要为每个公司画出唯一的节点, 所以我们要对数据进行一些处理: