<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>D3</title> <style> .chart div{ background-color: #3498db; text-align: right; padding: 3px; margin: 1px; color: white; } </style> <script src="/javascripts/d3js/d3.v3.js"></script> <script src="/javascripts/d3js/jsonData3.js"></script> </head> <body> <script> //create a data var data = [4, 8, 5, 2, 10, 20]; //创建一个容器 var chart = d3.select("body") .append("div") .attr("class", "chart"); //向容器中添加几个div元素 chart.selectAll("div") .data(data) .enter() .append("div") .style("width", function(d){ return d*10 + ‘px‘; }) .text(function(d){ return d; }) </script> </body> </html>
D3.js也是一个javascript框架,像jquery一样, 只不过他的特长是在数据可视化这一块而已。所以不要觉得D3是多么的复杂。在上面的代码中我们可以看到D3的一些用法:
选择元素:d3.select(“element”),这个就是jquery中的$(),只不过没有采用简写的形式。
创建并添加新元素到选定元素后:.append("element"),就是javascript中的append方法一样,他返回的是一个添加了该新元素的元素集。
设置或获取指定属性:.attr(name[, value]),同jquery中的attr()。
D3.js采用的是像jquery中的链式方法,在执行一个操作后可以继续调用其他的方法,但是,我们需要注意的是,前一个方法的输出类型必须要和下一个方法的输入类型相匹配!
选择所选的元素中的多个子元素组成新的选择集:selectAll("obj"),创建一个“空房子”--selection,这样我们可以往里面填充“家具”--数据。不过现在的选择集还没有插入到文档,因为我们还要给这些空的选择集加入数据是不是?
设置或获取一组元素的绑定数据:.data(dataset),这样“空房子”分配“家具”了,D3会根据数据来进行合理的分配,分配好了,这些家具下一步是不是该搬进这些小房子了呢?
返回一个新的、绑定了数据的元素:.enter(), 这样子我们的之前创建的房子就可以使用了。他们在DOM中有了自己的位置,我们终于可以往他身上进行操作了!
设置HTML属性:.attr()
设置CSS样式:.style()
原文地址:https://www.cnblogs.com/magic-xxj/p/9186386.html
时间: 2024-10-09 06:07:23