d3.js实战：地铁线路绘制与交互开发

d3.js

165 浏览量更新于2024-08-31 收藏 84KB PDF 举报

身份认证购VIP最低享 7 折!

30元优惠券

资源详情

资源推荐

d3.js 地铁轨道交通项目实战地铁轨道交通项目实战

主要介绍了d3.js 地铁轨道交通项目实战,本文通过实例代码项目截图给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下

上一章说了如何制作一个线路图，当然上一章是手写的JSON数据，当然手写的json数据有非常多的好处，例如可以应对客户的各种BT需求，但是大多数情况下我们都是使用地铁公司现成的JSON文件,

话不多说我们先看一下百度官方线路图。

就是这样的，今天我们就来完成它的大部分需求，以及地铁公司爸爸提出来的需求。

需求如下：需求如下：

1.按照不同颜色显示地铁各线路，显示对应站点。

2.用户可以点击手势缩放和平移（此项目为安卓开发）。

3.用户在线路menu里点击线路，对应线路平移值屏幕中心并高亮。

4.根据后台数据，渲染问题路段。

5.点击问题路段站点，显示问题详情。

大致需求就是这些，下面看看看代码

1.定义一些常量和变量

const dataset = subwayData; //线路图数据源

let subway = new Subway(dataset); //线路图的类文件

let baseScale = 2; //基础缩放倍率

let deviceScale = 1400 / 2640; //设备与画布宽度比率

let width = 2640; //画布宽

let height = 1760; //画布高

let transX = 1320 + 260; //地图X轴平移（将画布原点X轴平移）

let transY = 580; //地图X轴平移（将画布原点Y轴平移）

let scaleExtent = [0.8, 4]; //缩放倍率限制

let currentScale = 2; //当前缩放值

let currentX = 0; //当前画布X轴平移量

let currentY = 0; //当前画布Y轴平移量

let selected = false; //线路是否被选中（在右上角的线路菜单被选中）

let scaleStep = 0.5; //点击缩放按钮缩放步长默认0.5倍

let tooltip = d3.select('#tooltip'); //提示框

let bugArray = []; //问题路段数组

let svg = d3.select('#sw').append('svg'); //画布

let group = svg.append('g').attr('transform', `translate(${transX}, ${transY}) scale(1)`);//定义组并平移

let whole = group.append('g').attr('class', 'whole-line') //虚拟线路（用于点击右上角响应线路可以定位当视野中心，方法不唯一）

let path = group.append('g').attr('class', 'path'); //定义线路

let point = group.append('g').attr('class', 'point'); //定义站点

const zoom = d3.zoom().scaleExtent(scaleExtent).on("zoom", zoomed); //定义缩放事件

这就是我们需要使用的一些常量和变量。注意transX不是宽度的一半，是因为北京地铁线路网西线更密集。

2.读官方JSON

使用d3.js数据必不可少，然而官方的数据并不通俗易懂，我们先解读一下官方JSON数据。

每条线路对象都有一个l_xmlattr属性和一个p属性，l_xmlattr是整条线路的属性，p是站点数组，我们看一下站点中我们需要的属性。ex是否是中转站，lb是站名，sid是站的id，rx、ry是文字偏移量，st是

是否为站点（因为有的点不是站点而是为了渲染贝塞尔曲线用的），x、y是站点坐标。

3.构造自己的类方法

官方给了我们数据，但是并不是我们能直接使用的，所以我们需要构造自己的方法类

class Subway {

constructor(data) {

this.data = data;

this.bugLineArray = [];

}

getInvent() {} //获取虚拟线路数据

getPathArray() {} //获取路径数据

getPointArray() {} //获取站点数组

getCurrentPathArray() {} //获取被选中线路的路径数组

getCurrentPointArray() {} //获取被选中线路的站点数组

getLineNameArray() {} // 获取线路名称数组

getBugLineArray() {} //获取问题路段数组

}

下面是我们方法内容，里面的操作不是很优雅（大家将就看啦）

getInvent() {

let lineArray = [];

this.data.forEach(d => {

let { loop, lc, lbx, lby, lb, lid} = d.l_xmlattr;

let allPoints = d.p.slice(0);

loop && allPoints.push(allPoints[0]);

let path = this.formatPath(allPoints, 0, allPoints.length - 1);

lineArray.push({

lid: lid,

path: path,

})

return lineArray;

}

getPathArray() {

let pathArray = [];

this.data.forEach(d => {

let { loop, lc, lbx, lby, lb, lid} = d.l_xmlattr;

let allPoints = d.p.slice(0);

loop && allPoints.push(allPoints[0])

let allStations = [];

allPoints.forEach((item, index) => item.p_xmlattr.st && allStations.push({...item.p_xmlattr, index}))

let arr = [];

for(let i = 0; i < allStations.length - 1; i++) {

let path = this.formatPath(allPoints, allStations[i].index, allStations[i + 1].index);

arr.push({

lid: lid,

id: `${allStations[i].sid}_${allStations[i + 1].sid}`,

path: path,

color: lc.replace(/0x/, '#')

})

}

pathArray.push({

path: arr,

lc: lc.replace(/0x/, '#'),

lb,lbx,lby,lid

})

return pathArray;

}

getPointArray() {

let pointArray = [];

let tempPointsArray = [];

this.data.forEach(d => {

let {lid,lc,lb} = d.l_xmlattr;

下载后可阅读完整内容，剩余4页未读，立即下载

weixin_38700240

粉丝: 2
资源: 976

d3.js实战：地铁线路绘制与交互开发

neo4j4.2实例视频

python+Neo4j+flask,汽车行业知识图谱项目实战视频+源码(不加密).txt

小波分析与应用实例--附录程序

d3.js数据可视化实战手册

你可以使用d3.js制作可视化项目吗

d3.js数据可视化项目

比较好的D3.js教程有哪些

D3.js有哪些比较好的中文视频教程

d3.js在phython

d3.js samples

uniapp npm 安装d3.js

vscode中d3.js安装

d3.js的api文档

d3.js v6中文文档

vue d3.js知识图谱可视化

《D3.js数据可视化实战手册》—— 1.2 搭建一个简易的D3开发环境

d3.js在vue里使用

D3.js vscode安装

d3.js数据可视化作品

最新资源