数据可视化之D3.js_学习笔记
文章平均质量分 68
hb707934728
这个作者很懒,什么都没留下…
展开
-
d3.js之helloworld
第一个程序 HelloWorld Hello World 1 Hello World 2 var p=d3.select("body") .selectAll("p") .text("你妹滴") //修改段落的颜色和字体大小 p.style("colo原创 2017-02-23 17:18:06 · 381 阅读 · 0 评论 -
http请求头和响应头
1. HTTP请求头accept:浏览器通过这个头告诉服务器,它所支持的数据类型。如:text/html, image/jpegaccept-Charset:浏览器通过这个头告诉服务器,它支持哪种字符集。accept-encoding:浏览器通过这个头告诉服务器,它支持哪种压缩格式。accept-language:浏览器通过这个头告诉服务器,它的语言环境。host:浏览器通过这原创 2017-03-24 13:44:31 · 341 阅读 · 0 评论 -
d3js制作可拖动地图
效果图源码 Map Force .link { stroke: #ccc; stroke-width: 1;} var width = 1000; var height = 1000; var svg = d3.select("body").append("svg") .att原创 2017-03-15 10:13:59 · 1926 阅读 · 0 评论 -
d3js制作打包图
效果图:数据结构{"name":"中国","children":[ { "name":"浙江" , "children": [ {"name":"杭州" }, {"name":"宁波" }, {"name":"温州" }, {"name":"绍兴" } ] }, {原创 2017-03-13 10:41:26 · 912 阅读 · 1 评论 -
d3js创建集群图
效果图:数据结构{"name":"中国","children":[ { "name":"浙江" , "children": [ {"name":"杭州" }, {"name":"宁波" }, {"name":"温州" }, {"name":"绍兴" } ] },原创 2017-03-10 18:20:05 · 984 阅读 · 0 评论 -
d3js之弦图
效果图 弦图 .chord path { fill-opacity: 0.67; stroke: #000; stroke-width: 0.5px; } //1.定义数据 // 城市名 var city_name = [ "北京" ,原创 2017-03-10 11:11:41 · 732 阅读 · 0 评论 -
d3.js之力导向图
效果图 力导向图 var nodes = [ { name: "桂林" }, { name: "广州" }, { name: "厦门" }, { name: "杭州" }, { name: "上海原创 2017-03-09 18:20:28 · 2658 阅读 · 2 评论 -
用d3.js画饼状图
饼状图 var width = 400; var height = 400; var dataset = [ 30 , 10 , 43 , 55 , 13 ]; var svg = d3.select("body") .append("svg") .attr("width", width)原创 2017-03-09 17:33:36 · 1562 阅读 · 1 评论 -
前端数据可视化工具库
选择 D3:如果希望开发脑海中任意想象到的图表。选择 Highcharts、Echarts 等:如果希望开发几种固定种类的、十分大众化的图表。https://www.hcharts.cn/demo/highcharts/line-ajax(完美支持移动端)原创 2017-03-09 16:32:50 · 1350 阅读 · 0 评论 -
d3js完整柱形图
效果: 完整的柱形图 .axis path, .axis line{ fill: none; stroke: black; shape-rendering: crispEdges; } .axis text { font-family: sans-serif; font-size: 11px; } .MyRect { fi原创 2017-02-24 14:38:03 · 1847 阅读 · 0 评论 -
d3js比例尺
给柱形图添加比例尺 var width=300;//画布的宽度 var height=300;//画布的高度 var svg=d3.select("body") //选择文档中的body元素 .append("svg")//添加一个svg元素 .attr("width",width) //设定宽度 .attr("height",原创 2017-02-24 13:39:18 · 798 阅读 · 0 评论 -
d3js画矩形图
做一个简单的图表 var width = 800; //画布的宽度 var height = 500; //画布的高度 var svg = d3.select("body") //选择文档中的body元素 .append("svg") //添加一个svg元素 .attr("width", width) //设定宽度 .attr(原创 2017-02-24 10:51:11 · 7669 阅读 · 0 评论 -
d3.js之数据绑定
选择元素和绑定数据 Apple Pear Banana var str = "China"; var body = d3.select("body"); var p = body.selectAll("p"); //使用 datum 绑定单个数据原创 2017-02-23 17:45:16 · 1150 阅读 · 0 评论 -
d3js实现力学图+人物关系图
描述人物关系的数据结构{"nodes":[{ "name": "云天河" , "image" : "tianhe.png" },{ "name": "韩菱纱" , "image" : "lingsha.png" },{ "name": "柳梦璃" , "image" : "mengli.png" },{ "name": "慕容紫英" , "image" : "ziying原创 2017-03-16 09:51:29 · 10957 阅读 · 1 评论