D3.js 绘制地图

使用D3 V3版本绘制

绘制效果图：

准备工作： 3d立体柱状图的绘制

绘制地图思路：

绘制地图及地图投影；
根据地图地理信息将柱状图放置到指定位置；
根据scale计算出柱状图实际高度。

1. 绘制地图

地图的绘制可参考十二月咖啡馆：十五课地图，下面是地图绘制代码。

其中mapJson为GeoJSON文件，可在DATAV.GeoAtlas下载。

  // 基础数据初始化const svgObj = {width: 800,height: 750,};const mapColor = '#114a93';const mapLineColor = '#0d67c7';// 绘制const svg = d3.select(node).append('svg').attr({ width: svgObj.width, height: svgObj.height });// 定义地图的投影const projection = d3.geo.mercator().center([119.621184, 28.511708]).scale(19000);// 定义地理路径生成器const path = d3.geo.path().projection(projection);const mapGroups = svg.append('g').attr('class', 'mapGroups');// 地图路径绘制mapGroups.selectAll('path').data(mapJson.features).enter().append('path').attr('class', 'map-path').style('fill', () => mapColor).attr('stroke', mapLineColor).attr('d', path);// text地理名称mapGroups.selectAll('text').data(mapJson.features).enter().append('text').attr('x', (d) => projection(d.properties.centroid)[0]).attr('y', (d) => projection(d.properties.centroid)[1]).attr('transform', `translate(${0},${0})`).text((d) => d.properties.name).attr({'font-size': '16px',});

地图底部的阴影部分可依据相同办法绘制出路径，填充不同的线条及背景颜色，即可完成基础地图的绘制。

2. 添加地区数据

设置模拟数据如下：

   dataset: [{ id: 1, name: '遂昌县', rise: 3, unit: '%' },{ id: 2, name: '龙泉市', rise: 2, unit: '%' },{ id: 3, name: '松阳县', rise: 4, unit: '%' },{ id: 4, name: '云和县', rise: 2, unit: '%' },{ id: 5, name: '庆元县', rise: 3, unit: '%' },{ id: 6, name: '青田县', rise: 4, unit: '%' },{ id: 7, name: '莲都区', rise: 2, unit: '%' },{ id: 8, name: '景宁县', rise: 6, unit: '%' },{ id: 9, name: '缙云县', rise: 2, unit: '%' },],

相关代码：

  const rectWidth = 13;const rectHeight = 60;   // 应根据计算得出，先默认柱体高度为60const rectColor = '#14a8f394';const rectLineColor = '#12ddda';const rect3dGroups = svg.append('g').attr('class', 'rect3dGroups');const rect3d = rect3dGroups.selectAll('rect3d').data(mapJson.features).enter().append('g').attr('class', 'rect3d').style('transform', (d, i) => {if (i === 7) {    // 景宁县全称过长，单独设置样式return `translate(${-30 - 65}px, ${-4 + 25}px)`;}return 'translate(-30px, -4px)';});// 绘制顶面rect3d.append('path').attr('d', (d) => `M${projection(d.properties.centroid)[0]} ${projection(d.properties.centroid)[1] - rectHeight}l${rectWidth} ${-rectWidth}l${-rectWidth} ${-rectWidth}l${-rectWidth} ${rectWidth}z`).attr({fill: rectColor,stroke: rectLineColor,'stroke-width': 1,'shape-rendering': 'crispedges',});// 绘制侧面rect3d.append('path').attr('d', (d) => `M${projection(d.properties.centroid)[0]} ${projection(d.properties.centroid)[1]}l0 ${-rectHeight}l${rectWidth} ${-rectWidth}l0 ${rectHeight}l${-rectWidth} ${rectWidth}l${-rectWidth} ${-rectWidth}l0 ${-rectHeight}l${rectWidth} ${rectWidth}z`).attr({fill: rectColor,stroke: rectLineColor,'stroke-width': 1,'shape-rendering': 'crispedges',});

可参考 W3School SVG 线性渐变将柱体颜色设置为渐变色，此处未做渐变处理。
效果图：

3. 根据数据计算柱体高度

  // 定义柱体高度比例尺const maxData = d3.max(dataset.map((item) => item.rise));  // 最大增长率对应高度为60const rectHScale = d3.scale.linear()   // 设置线性比例尺.domain([0, maxData]).range([0, 60]);

则侧面与顶面 path 路径 d 中的 rectHeight 应根据数据计算高度，代码如下：

 .attr('d', (d)=>{let rectHeight = 0;for (let i = 0; i < dataset.length; i += 1) {if (d.properties.name.indexOf(dataset[i].name.slice(0, -1)) !== -1) {rectHeight = rectHScale(dataset[i].rise);}}return ...})

结果如图：

最后可根据设计图在柱状体旁边添加相关数据，也可添加相关动态效果。

D3.js 绘制地图相关推荐

d3js mysql_使用D3.js绘制地图并打点
本篇简单介绍一下使用D3.js绘制地图,并更具经纬度在地图打点.最后根据点生成voronoi图及其三角网. 下载地图geoJson文件去网上下载要绘制地图的geoJson文件. 使用d3.json( ...
D3.js绘制颜色:RGB、HSL和插值 (V3版本)
转载地址:D3.js绘制颜色:RGB.HSL和插值 (V3版本) 如果要计算介于两个颜色之间的颜色,需要用到插值(Interpolation).D3提供了d3.intrerpolateRgb()来处 ...
使用D3.js绘制重庆地图
重庆市地图json数据下载链接https://pan.baidu.com/s/19eZfuGGRY6JOrH9WnZJ5iw 密码h5f9 D3.js下载链接:https://pan.baidu.co ...
D3.js中国地图下钻
使用d3.js实现中国地图及中国地图下钻到省市区在可视化开发中,地图是很重要的一个环节,很多时候需要展现的不仅是国家地图,还需要能从国家进入到省市,看到区这样的下钻过程,今天我们就来实现这个效果. ...
D3.js中国地图下钻 1
#使用d3.js实现中国地图及中国地图下钻到省市区在可视化开发中,地图是很重要的一个环节,很多时候需要展现的不仅是国家地图,还需要能从国家进入到省市,看到区这样的下钻过程,今天我们就来实现这个效果. ...
D3.js绘制树形图
1.什么是D3: data-driven-document,翻译为数据驱动的文档,是一种由数据来决定绘图流程的程序设计模型.简单说,D3是一个JavaScript的函数库,用来做数据可视化(将数据的各 ...
d3.js 绘制极坐标图(polar plot)
0.引言在极坐标系中,任意位置可由一个夹角和一段相对原点(极点)的距离表示.也就是说,我们可以用 (angle,r) 来表示极坐标系中的点. 1.数据假设我们有如下数据集[ [10, 0.2], ...
d3js绘制y坐标轴_使用D3.js 绘制折线图
在一个网站上绘制折线图使用了ant/g2,打包后的体积到了一兆多,这不行了,需要按需加载.但是它的支持不太友好,我尝试在官网上用它的方法来按需引入,不是缺这就是缺那,很不好用. 反正我这里只是画个折线 ...
D3.js 绘制柱状图
使用D3 V4版本绘制使用D3绘制柱状图,绘制效果如下: 使用D3绘制柱状图,先对需要绘制的图形拆解,主要分为以下几个部分: 1. 比例尺的定义 2. 坐标轴的绘制 3. 添加矩形 4. 修改坐标轴 ...
D3.js 绘制散点图
一.实现效果二.代码 1.创建svg var svg = d3.select('#mychart').append('svg').attr('width', width + margin.left ...