D3.JS - 技术教程文章
D3.js学习笔记(三)——创建基于数据的SVG元素【代码】【图】
目标 在这一章,你将会使用D3.js,基于我们的数据来把SVG元素添加到网页中。这一过程包括:把数据绑定到元素上,然后在使用这些元素来可视化我们的数据。 注意:不同于前几章,我们从一个完整的代码开始,然后去一步步理解它,从这一章开始,我们将会从零开始构建我们的数据可视化。 我们的目标是使用这个数据集:1var circleRadii = [40,20,10]; 然后用D3.js来将这个数据集进行数据可视化。 SVG的Circle元素 首先我...
D3.js:坐标轴【代码】【图】
坐标轴: 是可视化图表中经常出现的一种图形,由一些列线段和刻度组成。坐标轴在 SVG 中是没有现成的图形元素的,需要用其他的元素组合构成。D3 提供了坐标轴的组件,如此在 SVG 画布中绘制坐标轴变得像添加一个普通元素一样简单。- 坐标轴的组成在 SVG 画布的预定义元素里,有六种基本图形:矩形圆形椭圆线段折线多边形另外,还有一种比较特殊,也是功能最强的元素:路径画布中的所有图形,都是由以上七种元素组成。显然,这里面没...
【 D3.js 入门系列 --- 10 】 地图的绘制【图】
本人的个人博客为:www.ourd3js.com csdn博客为:blog.csdn.net/lzhlzz 转载请注明出处,谢谢。 地图的制作在 D3 中可以说是最重要的一环。因为在进行数据可视化时,很多情况都会和地图联系在一起,如中国各省的人口多少,GDP多少等,都可以和地图联系在一起。 D3 中制作地图所需要的文件问 JSON 文件。JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。关于 JSON 的语法格式,可以在: http://www...
【 D3.js 入门系列 --- 9 】 常见可视化图形
本人的个人博客为: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处,谢谢。 Layout ,直译为“布局,安排”。但在 D3 中不是这个意思。 D3 中有很多 Layout 函数,它们不是为了在画面中布局什么,在 D3 中是对输入的数据进行转换,转换成比较容易进行可视化的数据。实际进行可视化时,需要其他的代码。我们可以简单地把 Layout 理解为“制作常见图形的函数”,比如饼状图等等。 D3 中一共...
d3.js学习笔记【代码】【图】
入门好文:http://www.ourd3js.com/wordpress/?p=51d3.js和d3.min.js内容一样,后者是压缩过的,适合发行版本,前者适合开发人员。1.选择集(满足css选择符的要求)主要和数据绑定一起使用d3.select()d3.selectAll()var body = d3.select("body")2.数据绑定(实质就是在选择集的元素对象里面添加一个变量,并赋值)p.text(function(d,i)){return d+" "+i}update、enter(不够)、exit(多于)处理模板,在d3中较为常用3.画柱形图 1.比例...
【 D3.js 入门系列 --- 8 】 对话操作(事件)【图】
本人的个人博客为: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处,谢谢。 这一节介绍怎样进行对话的操作,如鼠标单击,鼠标滑过等。 对一个被选择的元素,加入对话操作,代码例如以下:.on("click", function(){} ) 函数能够是无名函数。也能够是自定义的函数。上面代码监听的是鼠标单击的事件。但鼠标在被选择对象上单击时,就会调用函数 function 。 经常使用的事件(event)有:...
【 D3.js 入门系列 --- 9.5 】 树状图的制作【图】
这一节学习树状图的制作。树状图的制作和集群图完全相同,经过这两种 layout 转换后的数据也很相似。本人的个人博客为: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz转载请注明出处,谢谢。 树状图( Tree )通常用于表示层级、上下级、包含与被包含关系。树状图的制作和 9.4节集群图的制作 的代码几乎完全一样。不错,你没看错,几乎完全一样。那么为什么要把这两种图分开,它们有什么不同呢?先来看看对于同一组数据,它...
d3.js——给柱形图添加事件出现的问题总结【代码】【图】
首先做出一个动态的柱形图(这儿用的d3.js的版本是v3,用v4的话有些函数会发生变化)效果图:代码:<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>histogramTransitionEvent</title><style>.axis path,.axis line{fill: none;stroke: black;shape-rendering: crispEdges;}.axis text {font-family: sans-serif;font-size: 11px;}.MyText {fill: white;text-anchor: middle;}</style> </head> <body> <scri...
【 D3.js 高级系列 — 4.0 】 矩阵树图
矩阵树图(Treemap),也是层级布局的扩展,根据数据将区域划分为矩形的集合。矩形的大小和颜色,都是数据的反映。许多门户网站都能见到类似图1,将照片以不同大小的矩形排列的情形,这正是矩阵树图的应用。图1 http://www.texastribune.org/2010/10/07/treemap-reveals-campaign-ad-trends/现以浙江、广西、江苏三省份2013年的GDP作为数据,以GDP大小作为节点的权重将其制作成矩阵树图。1. 数据新建一个citygdp.json文件,内容如...
d3.js绘制饼状图【代码】【图】
<!DOCTYPE html><html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px"><head><title></title><meta charset="utf-8"><meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><link rel="stylesheet" href="css/fonts/font-awesome.min.css"><link rel="styleshe...
d3.js制作条形时间范围选择器【代码】【图】
此文章为原创文章,原文地址:https://www.cnblogs.com/eagle1098/p/12146688.html效果如上图所示。本项目使用主要d3.js v4制作,可以用来选择两年的时间范围,两端按钮切换年,在时间轴上标注可以选择的时间范围和关键时间点。时间数据可以在前端配置,也可以从后端请求。此程序相对比较简单,主要涉及d3的比例尺和拖动处理。1)d3的比例尺其实就是把一个范围的数据映射到另一个范围的数据上此处,我们使用线性比例尺:d3.scaleLi...
D3.js 力导向图的显示优化【代码】【图】
D3.js作为一个前端,说到可视化除了听过 D3.js 的大名,常见的可视化库还有?ECharts、Chart.js,这两个库功能也很强大,但是有一个共同特点是封装层次高,留给开发者可设计和控制的部分太少。和 EChart、Chart.js 等相比,D3.js**?的相对来说自由度会高很多,得益于 D3.js?**中的 SVG 画图对事件处理器的支持,D3.js?可将任意数据绑定到文档对象模型(DOM)上,也可以直接操作对象模型(DOM)完成 W3C DOM API 相关操作,对于想要展...
D3.js以及通用JS(JavaScript)读取并解析服务器端JSON的注意事项
这个需求其实挺明确的,但是网上搜出来的教程都乱七八糟,觉得实在需要自己总结一下。 D3.js目前已经被广泛使用在数据可视化领域,随着大数据的持续发展,这个框架估计会在今后更加流行(据说其作者Mike Bostock开始全职开发了,之前是负责纽约时报数据可视化的工程师,他本人也从纽约搬家到了旧金山……)。按照这里的介绍:https://github.com/mbostock/d3/wiki/API-Reference,D3.js实际上有专门读取JSON数据的API,所以其实D3....
测试成功的d3.js代码
第一次测试成功的d3.js代码,需要在ie9及以上的浏览器打开。火狐和google也可以尝试。删除<textarea>部分标记。<textarea cols="20" rows="8" id="con"><!DOCTYPE html><html><head> <title></title></head><style type="text/css"> body{ height: 100%; } .chart rect { stroke: white; fill: steelblue; }</style><script src="http://d3js.org/d3.v3.min.js" ></script><body></body><scri...
【 D3.js 入门系列 --- 2.1 】 关于怎样选择,插入,删除元素【图】
本人的个人博客首页为: http://www.ourd3js.com/ ,csdn博客首页为:http://blog.csdn.net/lzhlzz/。转载请注明出处,谢谢。在D3.js中,选择元素的函数有两个:select 和 selectAll 。先说明一下它们的差别: select 是选择所有指定元素的第一个selectAll 是选择指定元素的所有(以用于后面同一时候操作)来看一个详细的样例,现有例如以下代码: <html> <head> <meta charset="utf-8"> <title>select,append,exit</title> <...
D3.js-柱形图【代码】【图】
柱形图,是使用柱形的长短来表示数据变化的图表,也是最简单的图表之一。一般情况下,柱形图包括:矩形、坐标轴和文字。一、矩形和文字定义一个数组,每个数据项表示矩形的长短:var dataset = [50, 43, 120, 87, 99, 167, 142]; // 数据集定义一个SVG,表示绘制区域:var width = 400; // svg可视区域宽度var height = 400; // svg可视区域高度var svg = d3.select("body").append("svg") // 在body中添加SVG.attr("wi...
d3.js <一>【代码】
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>HelloWorld</title> 5 </head> 6 <body> 7 <p>Hello World 1</p>8 <p>Hello World 2</p>9 <!-- <p>Hello World 1</p>10 <p>Hello World 2</p> -->11 <div id="con"></div>12 <div id="chart01"></div>13 <bottom><button type="button" onclick="myadd()">add</button><button type="butto...
D3.js 更自由的条形图【代码】
一、添加一个矩形//Width and heightvar w = 500; var h = 100;var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];//创建SVG元素var svg = d3.select("body").append("svg").attr("width", w).attr("height", h);svg.selectAll("rect").data(dataset).enter().append("rect").attr("x", 0).attr("y", 0).attr("width", 20).attr("height", 100); 二、添加多条矩形//Width and he...
[1] D3.js的HelloWorld【图】
有兴趣的朋友欢迎来http://www.ourd3js.com/ 讨论下面开始用D3.js处理第一个简单问题,先看下面的代码: <html> <head> <meta charset="utf-8"> <title>HelloWorld</title> </head> <body> <p>Hello World 1</p><p>Hello World 2</p></body> </html> 如果你学习过HTML,应该知道会在屏幕中输出两行文字,如下图: 如果想用JavaScript来更改这两行文字,怎么办?我们会添加代码变为:<html> <head> <meta charset...
D3.js 使用缩放zoom时节点无法拖动,只能整体移动的问题【代码】
.on("dragstart", function() {d3.event.sourceEvent.stopPropagation();}) https://stackoverflow.com/questions/31692431/d3-js-drag-is-disabled-when-use-zoom原文:http://www.cnblogs.com/leyi/p/6909370.html
D3.js(v3)+react 制作 一个带坐标与比例尺的柱形图 (V3版本)【代码】【图】
现在用D3.js + react做一个带坐标轴和比例尺的柱形图。我已经尽力把代码全部注释上了,最后我也会把完整柱形图代码奉上。如果还有疑惑的,可以去翻看一下我之前介绍的方法,以下方法都有介绍到。还有数据都是自己定义的假数据,大家参考一下制作方法即可。 首先定义柱形图的数据、绘图区域的宽高、和上下左右的边距:1var width = 600; //SVG绘制区域的宽度2var height = 500; ...
javascript – 如何根据内容设置SVG(由D3.js绘制)高度?【代码】
我使用D3.js绘制树,与此图表相同:http://bl.ocks.org/mbostock/7809166但是高度和宽度是固定的,我想高度可以通过内容自动调整. 我的代码:var svg = d3.select("#feature_tree").append("svg").attr("width", width + margin.right + margin.left).append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 如果我没有定义高度,则无法完全显示树,除非我放大浏览器,否则可以显示缺失的树节点. 如果我...
使用D3.js构建实时图形的示例代码
首先你需要在计算机上安装Node和npm。 数据的可视化表示是传递复杂信息的最有效手段之一,D3.js提供了创建这些数据可视化的强大工具和灵活性。 D3.js是一个JavaScript库,用于使用SVG,HTML和CSS在Web浏览器中生成动态的交互式数据可视化。 D3 提供了各种简单易用的函数,大大简化了 JavaScript 操作数据的难度。由于它本质上是 JavaScript ,所以用 JavaScript 也是可以实现所有功能的,但它能大大减小你的工作量,尤其是在数据可...
JavaScript-d3.js多系列折线图工具提示问题【代码】
在此链接D3.JS: Multiseries line chart with mouseover tooltip中,我有一个关于示例的工具提示问题.在此示例中,工具提示仅显示y轴上的华氏度数据.但是在我的项目中,我也想查看未在x和y轴上显示的数据. 在此示例中,我根据上面链接中的代码在第84行进行了更改以生成摄氏度(C).如何在单个工具提示中同时显示华氏度和摄氏度? [请参阅小提琴] [2] https://jsfiddle.net/xn1sLbf4/3/在这里,我只是想插入数据的“列”.就我而言,“摄氏”...
D3.js实现拓扑图的示例代码【图】
最近写项目需要画出应用程序调用链的网路拓扑图,完全自己写需要花费些时间,那么首先想到的是echarts,但echarts的自定义写法写起来非常麻烦,而且它的文档都是基于配置说明的,对于自定义开发不太方便,尝试后果断放弃,改用D3.js,自己完全可控。 我们先看看效果我把代码分享下,供和我一样刚接触D3的同学参考,不对的地方欢迎指正! 完整代码: html: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Ti...
javascript-D3.js用数组替换tsv文件【代码】
我一直在尝试实现以下chart,而未从其他来源获取数据时使用d3.tsv. 按照其他类似的question中的说明,我尝试替换了这部分代码:d3.tsv("data.tsv", type, function(error, data) {if (error) throw error;var cities = data.columns.slice(1).map(function(id) {return {id: id,values: data.map(function(d) {alert(d.date);alert(id);return {date: d.date, temperature: d[id]};})};});带有:var data=[ {date:20111001,temperatu...
javascript – 将标记放到使用topoJSON和d3.js生成的地图上【代码】
我正在创建一个特定州的地图,我一直在尝试使用d3.js和topojson并创建了一个很棒的地图,但现在我想在地图上添加一个标记. 但是现在我遇到了问题,因为当我添加标记有一个GeoJSON文件来为生成的地图添加标记时,我还想在按下标记时打开工具提示. 我的地图非常类似于:http://bl.ocks.org/mbostock/4699541,我想要的是通过具有标记的地理坐标的GeoJSON文件向状态添加标记. 所以地图是目前的 预计地图……解决方法:你可以在你的json回调结...
javascript-D3.js:元素没有任何宽度【代码】
我正在尝试将四个rectto附加到我的svg中.我可以看到它们附加在chrome的开发工具中.但是,它们从未被渲染,因为似乎我在传递width值时遇到问题. 此外,在D3的版本3中,我在浏览器中收到以下错误消息:d3.v3.min.js:1 Error: attribute width: Expected length, “NaN”.版本4中没有错误消息. 这是我的代码:<!DOCTYPE html> <html><head><meta charset="utf-8"><title>Test</title><script src="https://d3js.org/d3.v3.min.js"></scri...
将d3.js JavaScript函数转换为CoffeeScript【代码】
害怕我在如何将这个JavaScript转换为类中的CoffeeScript时犯了一个简单的错误 在这original example of a world map我们有一个功能:var quantize = d3.scale.quantize().domain([0, .15]).range(d3.range(9).map(function(i) { return "q" + i + "-9"; }));然后在渲染地图时调用它:.attr("class", function(d) { return quantize(rateById.get(d.id)); })我们留下类似class =“q8-9这就是我们想要的东西. 将其转换为CoffeeScript...
使用d3.json从PHP进行JSON输出【代码】
我创建了一个PHP文件来查询JSON输出.来自PHP文件的特定过滤器“ testPHP.php?number = 123”的JSON输出为[{"source":"AB","target":"AC","type":"true"},{"source":"UB","target":"EP","type":"true"},{"source":"US","target":"UR","type":"lie"},{"source":"BS","target":"QW","type":"lie"},{"source":"UW","target":"EA","type":"lie"}]我已经在html文件中尝试过此操作,以读取JSON输出到links变量var links; // a global d3.j...