d3.js读取JSON文件数据并输出

JavaScript08

d3.js读取JSON文件数据并输出,第1张

//获取json,这里用的是jquery的ajax方法,只是意思意思,这里可以替换为任何ajax请求

function getData(){

$.ajax({

url: "xxx.php",

success: function(jsondata){

output(jsondata)

}

})

}

//函数

function output(json){

//转换字符串为对象

var Data = eval('(' + json + ')')

var html = ''

for(var i=0i<Data.lengthi++){

//具体键值根据你返回的字符串来

html += '名字' + Data[i].name + ' 年龄' + Data[i].age

}

//插入到元素

document.getElementById('el').innerHTML = html

}

//每隔10秒执行

setTimeout(getData, 10000)

d3.js 是一个可以基于数据来操作文档的 JavaScript 库,可以帮你使用HTML CSS JS SVG Canvas 来展示数据,它结合强大的视图组件来驱动Dom操作.

d3引入的使用

也可以单独使用某个模块,比如单独使用d3-selection

可以模块化引入

Selections 允许强大的数据驱动文档对象模型(DOM):设置attributes,styles,HTML 或 text 内容,选择集的方法通常选择当前的选择当前的选择集或者新的选择集,因此允许进行链式调用。

等价于:

选中符合条件的第一个元素,选择条件为 selector 字符串。如果没有元素被选中则返回空选择集,如果选择器有多个,那就返回匹配第一个选择集

选择所有与制定的selector匹配的元素,返回一个数组。如果没有元素被选中,则返回的空的选择集。

视图移动以及缩放是一种流行的交互技术 缩放行为通过 d3-zoom 模块来实现,缩放本身与DOM元素无关,可以用于SVG,HTML 或者 Canvas。

创建一个新的缩放行为,并返回该行为。zoom既是一个对象又是一个函数,通过selection.call()来应用到元素本身上

事件绑定 .zoom 双击禁用缩放 以及 禁止滚动齿轮缩放