D3实现的ChinaMap

<html>  <head>  <meta charset="utf-8">  <title>中国地图</title>  </head>
<style></style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>var width  = 1000;var height = 1000;var svg = d3.select("body").append("svg").attr("width", width).attr("height", height).append("g").attr("transform", "translate(0,0)");var projection = d3.geo.mercator().center([107, 31]).scale(850).translate([width/2, height/2]);var path = d3.geo.path().projection(projection);var color = d3.scale.category20();d3.json("china.geojson", function(error, root) {if (error) return console.error(error);console.log(root.features);svg.selectAll("path").data( root.features ).enter().append("path").attr("stroke","#000").attr("stroke-width",1).attr("fill", function(d,i){return color(i);}).attr("d", path ).on("mouseover",function(d,i){d3.select(this).attr("fill","yellow");}).on("mouseout",function(d,i){d3.select(this).attr("fill",color(i));});});</script></body>
</html>

D3实现的ChinaMap相关推荐

【 D3.js 入门系列 --- 10 】地图的绘制
地图的制作在 D3 中可以说是最重要的一环.因为在进行数据可视化时,很多情况都会和地图联系在一起,如中国各省的人口多少,GDP多少等,都可以和地图联系在一起. D3 中制作地图所需要的文件问 JSON ...
THREE + d3制作中国地图挤压(extrude)模型
下午花了几个小时边学边做,做出来了一个中国地图的挤压模型.其中中国地图的数据是geojson的格式,由于相关法律这里无法提供地图数据.如果想要学习交流使用可以前往github上翻一翻. 使用的工具很单 ...
从壹开始微服务 [ DDD ] 之一 ║ D3模式设计初探与我的计划书
缘起哈喽大家周四好!又是开心的一天,时间过的真快,我们的 <从壹开始 .net core 2.1 + vue 2.5 >前后端分离系列共 34 篇已经完结了,当然以后肯定还会有更新和修改 ...
D3.js、HTML5、canvas 开发专题
https://www.smartdraw.com/genogram/ http://www.mamicode.com/info-detail-1163777.html D3折线图 https:// ...
【D3】transition API
摘要: 动画类API 一.API 使用 1. 1 d3.ease 1.2 d3.timer Start a custom animation timer, invoking the specified ...
D3.js系列——初步使用、选择元素与绑定数据
D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个被数据驱动的文档.听名字有点抽象,说简单一点,其实就是一个 JavaScript 的函数库,使用它主要是用来做数据可 ...
交互式数据可视化－D3.js（一）
在D3中会穿插SVG 方便大家对D3对使用 SVG简介可缩放矢量图(scalabel vector graphics),是用于描述二维矢量图形的一种图形格式,是由W3C制订的开放标准.SVG使用XM ...
r语言编辑 d3.js_d3.js的语言介绍
r语言编辑 d3.js by Matt Oxley 由马特·奥克斯利(Matt Oxley) d3.js的语言介绍 (A linguistic introduction to d3.js) 如何从一 ...
d3.js图表_如何使用D3.js建立历史价格图表
d3.js图表逐步可视化财务数据集的方法 (A step by step approach towards visualizing financial datasets) It is a chall ...
用D3.js 十分钟实现字符跳动效果
用D3.js 十分钟实现字符跳动效果注本文基于 D3.js 作者 Mike Bostock 的例子原文分为三部分, 在这里笔者将其整合为了一篇方便阅读. 该效果基于 D3.js, 主要使用到了 ...

D3实现的ChinaMap

D3实现的ChinaMap相关推荐

最新文章

热门文章