radar-chart-d3-master 用D3.js绘制的雷达图,数据可视化的一个方法 Windows Develop 256万源代码下载-
&文件名称: radar-chart-d3-master& & [
& & & & &&]
&&所属分类:
&&开发工具: JavaScript
&&文件大小: 19 KB
&&上传时间:
&&下载次数: 0
&&提 供 者:
&详细说明：用D3.js绘制的雷达图,数据可视化的一个方法-Drawing the radar map with D3. Js
文件列表(点击判断是否您需要的文件，如果是垃圾请在下面评价投诉):
&&radar-chart-d3-master&&.....................\.gitignore&&.....................\.jshintrc&&.....................\LICENSE&&.....................\README.md&&.....................\bower.json&&.....................\example&&.....................\.......\csv2radar.html&&.....................\.......\demo.svg&&.....................\.......\index.html&&.....................\package.json&&.....................\src&&.....................\...\radar-chart.css&&.....................\...\radar-chart.js&&.....................\...\radar-chart.min.css&&.....................\...\radar-chart.min.js
&输入关键字，在本站256万海量源码库中尽情搜索：【d3.js实践教程02】基于中国地图的高考一本录取率排行 - 博客频道 - CSDN.NET
java.lang.NullPointerException
分类：项目实践那年开始的java
学习d3.js（以下都简称d3）也有一段时间了，运行d3做了几个项目。我发现中文的d3教程很少，国外资料多但要求有一定的英文阅读能力（推荐网址：），于是就萌发了写一个d3实际运用系列文章的想法，现在开始付之行动。在系列中，我会用d3+html5 canvas实现一些实际效果（如统计结果展示，地图数据展示等），希望可以跟大家共同学习交流。
代码我公布在上，大家可以clone到本地运行，地址是：
运行环境是java 7+，tomcat 7.0.47+（以后会用到websocket，所以需要javaee7 跟 tomcat 7+的支持），IDE 是IntelliJ IDEA 13， 项目的视图使用了freemarker。
这一章讲的是在中国地图上展示2013年大陆各省份高考一本录取率的排行。
首先需要有录取率的相关数据，我从网上复制出来了一份统计数据：
2013年一本录取率排名
0.%这个文件可以在d3lesson中找到
对于有规则的txt数据（如一行一个对象），我写了一个转换工具，可以转成json（json格式在网页中使用较为方便），具体可见：org.mon.tools.impl.TxtToJSONImporter 这个类。
最终效果图
最终的效果图如下（当鼠标移动到省份可以看到具体的信息）
（根据录取率排行，颜色深的代表录取率越高）
（根据高考人数排行，颜色深的代表高考人数越多）
1. 画出中国地图
整个地图是用svg的path绘制，那么需要有相应的数据。中国地图的json数据在 /web/data/china.json 中，我们可以用d3的json（）方法加载这个json，然后绘制出地图。
加载方法：
d3.json(&{json路径}&, function(data){
//这里是回调函数，如果加载成功，data就是json对象
//执行drawChina方法绘制地图
绘制函数（这里使用过的是墨卡托投影， projection 的调整我暂时没弄透彻，反正是对着屏幕调到满意的位置就好了，如果有朋友知道欢迎解答，万分感谢！）
在绘制过程中，给每个省份对应的path加一个唯一的id，方便以后调用（如修改颜色就是通过id获取path来完成）
// Project from latlng to pixel coords
//使用墨卡托投影
var projection = d3.geo.mercator()
.scale(width/2)
//对地图进行缩放
.translate([width / 2, height / 2])
//将地图平移到屏幕中间
.rotate([-110, 0])
.center([0, 37.5])
//设置中心点，调整到屏幕中心
// Draw geojson to svg path using the projection
var path = d3.geo.path().projection(projection);
//画出中国地图
function drawChina(ds){
if(!chinaG)
chinaG = container.append(&g&);
chinaG.selectAll(&path&)
.data(ds.features)
.insert(&path&)
.attr(&id&, function(d){
.attr(&fill&, &#000000&)
.attr(&d&, path)
.attr('stroke',setting.strokeColor)
.attr('stroke-width','0.7px')
这样下来，就得到这样的一个地图
看看dom中都创建了什么？
2. 根据排行对省份进行颜色分配
接着，就要根据排序规则对省份上色了。先看看统计数据是怎么样的（就是第一步中转换过来的json数据）：
&_title&: &2013年一本录取率排名&,
&datas&: [
&enter&: 1.5447,
&id&: &TIANJIN&,
&index&: 1,
&province&: &天津&,
&rate&: &24.52%&,
&total&: 6.3
&enter&: 1.7686,
&id&: &BEIJING&,
&index&: 2,
&province&: &北京&,
&rate&: &24.33%&,
&total&: 7.27
&enter&: 1.2,
&id&: &SHANGHAI&,
&index&: 3,
&province&: &上海&,
&rate&: &22.64%&,
&total&: 5.3
//剩下的就不列出来了同样的，我们用d3.json() 方法加载这些数据，然后排序其中的datas数组。
这里要说一下过度颜色，我是这样定义的：
//创建过度颜色,注意上一步的排序是从大到小，那么颜色应该是从深到浅
var rateColors = d3.scale.linear()
.domain([1, 340])
.range([d3.rgb(20, 120, 140),d3.rgb(180, 230, 255)]);那么可以这样得到一个颜色值： rateColors(index); 传进去的index应该是 1 到 340 之间（当然你传更大或更小的也可以），那么就得到d3.rgb(20, 120, 140),d3.rgb(180, 230, 255) 之间相对应的一个颜色。 如index=1 就得到&d3.rgb(20, 120, 140), index = 340 就得到d3.rgb(180, 230, 255)， index=170 就得到两个端点颜色的中间颜色。
最后就是对数据排序，然后更新对应省份的颜色了：
* 根据录取率排序
function sortByRate(){
//首先我们需要对数据进行录取率从大到小的排序
//因为rate 是 xx.xx% 的格式，所以在对比前需要进行parseFloat 的操作
var data = gkData.datas.sort(function(d1,d2){
return parseFloat(d2.rate) - parseFloat(d1.rate);
//创建过度颜色,注意上一步的排序是从大到小，那么颜色应该是从深到浅
var rateColors = d3.scale.linear()
.domain([1, 340])
.range([d3.rgb(130, 140, 20),d3.rgb(255, 255, 180)]);
遍历上一步得到是数组
forEach 参数中的 d 就是遍历到的某个数据， i 就是该对象的下标序号，从0开始
data.forEach(function(d,i){
d.sort = i+1;
//通过d.id 来获取中国地图上对应的省份，因为地图中的省份块是根据省份拼音命名的
d3.select(&#&+ d.id)
.transition()
.duration(duration)
.delay(10*i)
.attr(&fill&, rateColors((i+1)*10))
buildTip(data);
showOnTable(data);
* 根据参加高考人数排序
function sortByTotal(){
//首先我们需要对数据进行录取率从大到小的排序
//因为rate 是 xx.xx% 的格式，所以在对比前需要进行parseFloat 的操作
var data = gkData.datas.sort(function(d1,d2){
return d2.total - d1.
//创建过度颜色,注意上一步的排序是从大到小，那么颜色应该是从深到浅
var rateColors = d3.scale.linear()
.domain([1, 340])
.range([d3.rgb(20, 120, 140),d3.rgb(180, 230, 255)]);
.range([d3.rgb(30, 40, 160),d3.rgb(180, 160, 255)]);
遍历上一步得到是数组
forEach 参数中的 d 就是遍历到的某个数据， i 就是该对象的下标序号，从0开始
data.forEach(function(d,i){
d.sort = i+1;
//通过d.id 来获取中国地图上对应的省份，因为地图中的省份块是根据省份拼音命名的
d3.select(&#&+ d.id)
.transition()
.duration(duration)
.delay(10*i)
.attr(&fill&, rateColors((i+1)*10))
buildTip(data);
showOnTable(data);
3. 创建提示
鼠标移动到省份上，可以显示具体的信息（这个功能是很实用的！客户绝对是需要的）
首先，先定义好用来显示提示的div元素
&!--div提示框--&
&div id=&tooltip& class=&hidden box&&
&strong class=&dataHolder& name=&province&&&/strong&
排名:&span class=&dataHolder& name=&sort&&&/span&
高考人数:&span class=&dataHolder& name=&total&&&/span&万 
录取率:&span class=&dataHolder& name=&rate&&&/span&
&/div&然后用d3填充数据
* 创建提示条
* 提示的创建大致有3种方式
* 1： 给svg元素里面增加一个title元素，
var t = d3.select(id).append(&title&).text(&我是提示条&);
这种方法效果不大理想，而且提示单调
* 2： 给需要提示的元素添加mouseover， mouseout 事件，当鼠标在该元素上移动时，就显示提示条（动态创建的svg元素），如：
var t = d3.select(id);
t.on('mouseover',function(){
//创建提示条
svg.append(&text&)
.attr(&id&, &tooltip&)
.attr(&x&, d3.event.x)
.attr(&y&, d3.event.y)
.attr(&text-anchor&, &middle&)
.attr(&font-family&, &sans-serif&)
.attr(&font-size&, &11px&)
.attr(&font-weight&, &bold&)
.attr(&fill&, &black&)
.text(&我是svg的提示条&);
* 3： 类似方法2，但是提示条不是svg元素，而是普通的html元素（如div），动态修改提示框里面的内容跟提示框的x，y坐标
达到提示的效果，总体来说这个方法较好，较为灵活，而且可以使用css3，同时不用担心提示框超出svg范围的问题
所以，在教程中，都是使用这个方法
function buildTip(data){
var t = &#tooltip&;
chinaG.selectAll(&path&)
.data(data, function(d){
.on(&mouseover&,function(d){
d3.select(t)
.style(&left&, d3.event.x + &px&)
.style(&top&, d3.event.y + &px&)
.classed(&hidden&, false)
.selectAll(&.dataHolder&)[0]
.forEach(function(h){
h = d3.select(h);
h.html(d[h.attr('name')]);
d3.select(this)
.attr(&opacity&, 0.8);
.on(&mouseout&,function(){
d3.select(t).classed(&hidden&, true);
d3.select(this)
.attr(&opacity&, 1);
详细的代码请到：
ssrc0604hx
排名：第9101名
（6）（31）（6）（4）（4）（2）（1）（2）（9）（1）（0）学习d3.js（以下都简称d3）也有一段时间了，运行d3做了几个项目。我发现中文的d3教程很少，国外资料多但要求有一定的英文阅读能力（推荐网址：），于是就萌发了写一个d3实际运用系列文章的想法，现在开始付之行动。在系列中，我会用d3+html5 canvas实现一些实际效果（如统计结果展示，地图数据展示等），希望可以跟大家共同学习交流。
代码我公布在上，大家可以clone到本地运行，地址是：
运行环境是java 7+，tomcat 7.0.47+（以后会用到websocket，所以需要javaee7 跟 tomcat 7+的支持），IDE 是IntelliJ IDEA 13， 项目的视图使用了freemarker。
这一章讲的是在中国地图上展示2013年大陆各省份高考一本录取率的排行。
首先需要有录取率的相关数据，我从网上复制出来了一份统计数据：
2013年一本录取率排名
0.%这个文件可以在d3lesson中找到
对于有规则的txt数据（如一行一个对象），我写了一个转换工具，可以转成json（json格式在网页中使用较为方便），具体可见：org.mon.tools.impl.TxtToJSONImporter 这个类。
最终效果图
最终的效果图如下（当鼠标移动到省份可以看到具体的信息）
（根据录取率排行，颜色深的代表录取率越高）
（根据高考人数排行，颜色深的代表高考人数越多） 如何实现?
1. 画出中国地图
整个地图是用svg的path绘制，那么需要有相应的数据。中国地图的json数据在 /web/data/china.json 中，我们可以用d3的json（）方法加载这个json，然后绘制出地图。
加载方法：
d3.json(&{json路径}&, function(data){
//这里是回调函数，如果加载成功，data就是json对象
//执行drawChina方法绘制地图
绘制函数（这里使用过的是墨卡托投影， projection 的调整我暂时没弄透彻，反正是对着屏幕调到满意的位置就好了，如果有朋友知道欢迎解答，万分感谢！）
在绘制过程中，给每个省份对应的path加一个唯一的id，方便以后调用（如修改颜色就是通过id获取path来完成）
// Project from latlng to pixel coords
//使用墨卡托投影
var projection = d3.geo.mercator()
.scale(width/2)
//对地图进行缩放
.translate([width / 2, height / 2])
//将地图平移到屏幕中间
.rotate([-110, 0])
.center([0, 37.5])
//设置中心点，调整到屏幕中心
// Draw geojson to svg path using the projection
var path = d3.geo.path().projection(projection);
//画出中国地图
function drawChina(ds){
if(!chinaG)
chinaG = container.append(&g&);
chinaG.selectAll(&path&)
.data(ds.features)
.insert(&path&)
.attr(&id&, function(d){
.attr(&fill&, &#000000&)
.attr(&d&, path)
.attr('stroke',setting.strokeColor)
.attr('stroke-width','0.7px')
这样下来，就得到这样的一个地图
看看dom中都创建了什么？
2. 根据排行对省份进行颜色分配
接着，就要根据排序规则对省份上色了。先看看统计数据是怎么样的（就是第一步中转换过来的json数据）：
&_title&: &2013年一本录取率排名&,
&datas&: [
&enter&: 1.5447,
&id&: &TIANJIN&,
&index&: 1,
&province&: &天津&,
&rate&: &24.52%&,
&total&: 6.3
&enter&: 1.7686,
&id&: &BEIJING&,
&index&: 2,
&province&: &北京&,
&rate&: &24.33%&,
&total&: 7.27
&enter&: 1.2,
&id&: &SHANGHAI&,
&index&: 3,
&province&: &上海&,
&rate&: &22.64%&,
&total&: 5.3
//剩下的就不列出来了同样的，我们用d3.json() 方法加载这些数据，然后排序其中的datas数组。
这里要说一下过度颜色，我是这样定义的：
//创建过度颜色,注意上一步的排序是从大到小，那么颜色应该是从深到浅
var rateColors = d3.scale.linear()
.domain([1, 340])
.range([d3.rgb(20, 120, 140),d3.rgb(180, 230, 255)]);那么可以这样得到一个颜色值： rateColors(index); 传进去的index应该是 1 到 340 之间（当然你传更大或更小的也可以），那么就得到d3.rgb(20, 120, 140),d3.rgb(180, 230, 255) 之间相对应的一个颜色。 如index=1 就得到&d3.rgb(20, 120, 140), index = 340 就得到d3.rgb(180, 230, 255)， index=170 就得到两个端点颜色的中间颜色。
最后就是对数据排序，然后更新对应省份的颜色了：
* 根据录取率排序
function sortByRate(){
//首先我们需要对数据进行录取率从大到小的排序
//因为rate 是 xx.xx% 的格式，所以在对比前需要进行parseFloat 的操作
var data = gkData.datas.sort(function(d1,d2){
return parseFloat(d2.rate) - parseFloat(d1.rate);
//创建过度颜色,注意上一步的排序是从大到小，那么颜色应该是从深到浅
var rateColors = d3.scale.linear()
.domain([1, 340])
.range([d3.rgb(130, 140, 20),d3.rgb(255, 255, 180)]);
遍历上一步得到是数组
forEach 参数中的 d 就是遍历到的某个数据， i 就是该对象的下标序号，从0开始
data.forEach(function(d,i){
d.sort = i+1;
//通过d.id 来获取中国地图上对应的省份，因为地图中的省份块是根据省份拼音命名的
d3.select(&#&+ d.id)
.transition()
.duration(duration)
.delay(10*i)
.attr(&fill&, rateColors((i+1)*10))
buildTip(data);
showOnTable(data);
* 根据参加高考人数排序
function sortByTotal(){
//首先我们需要对数据进行录取率从大到小的排序
//因为rate 是 xx.xx% 的格式，所以在对比前需要进行parseFloat 的操作
var data = gkData.datas.sort(function(d1,d2){
return d2.total - d1.
//创建过度颜色,注意上一步的排序是从大到小，那么颜色应该是从深到浅
var rateColors = d3.scale.linear()
.domain([1, 340])
.range([d3.rgb(20, 120, 140),d3.rgb(180, 230, 255)]);
.range([d3.rgb(30, 40, 160),d3.rgb(180, 160, 255)]);
遍历上一步得到是数组
forEach 参数中的 d 就是遍历到的某个数据， i 就是该对象的下标序号，从0开始
data.forEach(function(d,i){
d.sort = i+1;
//通过d.id 来获取中国地图上对应的省份，因为地图中的省份块是根据省份拼音命名的
d3.select(&#&+ d.id)
.transition()
.duration(duration)
.delay(10*i)
.attr(&fill&, rateColors((i+1)*10))
buildTip(data);
showOnTable(data);
3. 创建提示
鼠标移动到省份上，可以显示具体的信息（这个功能是很实用的！客户绝对是需要的）
首先，先定义好用来显示提示的div元素
&!--div提示框--&
&div id=&tooltip& class=&hidden box&&
&strong class=&dataHolder& name=&province&&&/strong&
排名:&span class=&dataHolder& name=&sort&&&/span&
高考人数:&span class=&dataHolder& name=&total&&&/span&万&
录取率:&span class=&dataHolder& name=&rate&&&/span&
&/div&然后用d3填充数据
* 创建提示条
* 提示的创建大致有3种方式
* 1： 给svg元素里面增加一个title元素，
var t = d3.select(id).append(&title&).text(&我是提示条&);
这种方法效果不大理想，而且提示单调
* 2： 给需要提示的元素添加mouseover， mouseout 事件，当鼠标在该元素上移动时，就显示提示条（动态创建的svg元素），如：
var t = d3.select(id);
t.on('mouseover',function(){
//创建提示条
svg.append(&text&)
.attr(&id&, &tooltip&)
.attr(&x&, d3.event.x)
.attr(&y&, d3.event.y)
.attr(&text-anchor&, &middle&)
.attr(&font-family&, &sans-serif&)
.attr(&font-size&, &11px&)
.attr(&font-weight&, &bold&)
.attr(&?ll&, &black&)
.text(&我是svg的提示条&);
* 3： 类似方法2，但是提示条不是svg元素，而是普通的html元素（如div），动态修改提示框里面的内容跟提示框的x，y坐标
达到提示的效果，总体来说这个方法较好，较为灵活，而且可以使用css3，同时不用担心提示框超出svg范围的问题
所以，在教程中，都是使用这个方法
function buildTip(data){
var t = &#tooltip&;
chinaG.selectAll(&path&)
.data(data, function(d){
.on(&mouseover&,function(d){
d3.select(t)
.style(&left&, d3.event.x + &px&)
.style(&top&, d3.event.y + &px&)
.classed(&hidden&, false)
.selectAll(&.dataHolder&)[0]
.forEach(function(h){
h = d3.select(h);
h.html(d[h.attr('name')]);
d3.select(this)
.attr(&opacity&, 0.8);
.on(&mouseout&,function(){
d3.select(t).classed(&hidden&, true);
d3.select(this)
.attr(&opacity&, 1);
详细的代码请到：}