D3.基础用法(一)

D3基本操作

• 修改内容

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js"
        integrity="sha512-vc58qvvBdrDR4etbxMdlTt4GBQk1qjvyORR2nrsPsFPyrs+/u5c3+1Ct6upOgdZoIl7eq6k3a1UPDSNAQi/32A=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        var p = d3.select("body")
            .selectAll("p")
            .text("hello D3")
        p.style("color", "red")
    </script>

• 绘制矢量图

  var svg = d3.select("body")
            .append("svg")
            .attr("width", 500)
            .attr("height", 500)
        svg.append("circle")
            .attr("cx", 50)
            .attr("cy", 50)
            .attr("r", 50)
            .style("fill", "red")

选择集与方法

• 选择元素
  select 和 selectAll

d3.select("body") //选择body元素
d3.select("#main") // 选择id为main的元素
d3.select(".content") // 选择类为content的第一个元素
d3.selectAll("p") // 选择所有的p元素
d3.selectAll(".content") // 选择类为content的所有元素
d3.selectAll("ul li") //选择ul下所有li
d3.select(document.getElementById("important"))
d3.select("body").selectAll("p")

• 查看状态

empty(): 选择集为空返回false
node(): 选择集为空,返回null
size(): 返回选择集个数

• 设定和获取属性

// 设定或修改
d3.select("p").attr("id","para")
// 获取
d3.select("p").attr("id")

// 多个类名设置要隔开
d3.select("p").attr("class","red bigsize")
// classed: 这种写法我们可以根据条件判断去开启和关闭
d3.select("p").classed("red",true).classed("bigsize",false)
d3.select("p").classed({"red":true,"bigsize":false})
d3.select("p").classed({"red bigsize":true)

//style
d3.select("p").style("color","red").style("font-size","30px")
d3.select("p").style({"color":"red","font-size":30px})
// 有部分属性不能用attr()设定和获取,典型的输入框
d3.select("#fname").property("value")
d3.select("#fname").property("value","lisi")
// 文本内容
d3.select("#fname").text() // innerText
d3.select("#fname").html() //innerHTML

• 添加,插入和删除

append(): 添加,末尾插入
insert(): 指定元素前插入
remove(): 删除选择集中的元素

• 数据绑定

/**
datum() 对于选择集中每个元素,都会增加一个__data__属性,value如果是undefined和null的话,则不会创建__data__属性
*/
datum([value]):选择集上都绑定一个相同的数据value
d3.select("body").selectAll("p").datum("name").text("1") //替换内容
d3.select("body").selectAll("p").datum("name").append("span").text("1") // 在每个被选择的元素添加span
/**
数组长度大于元素数量,为多余数据预留元素位置,以便后期插入新元素
数组元素小于元素数量,能获取到多余的元素位置,以便将来删除
d3中根据数组长度和元素关系,归纳为以下情况:
update: 数组长度 = 元素数量
enter: 数组长度 > 元素数量
exit: 数组长度 < 元素数量
*/
data(values,key): 选择集中每个元素分别绑定数组values的每一项
d3.select("body").selectAll("p").data([10,20,30])

• 绑定的顺序

data()是按索引号顺序绑定的,也可以不按顺序,需要用到第二个参数
var p = d3.select("body").selectAll("p")
dataset = [
   { id: 1, name: "张三" },
   { id: 2, name: "李四" },
   { id: 6, name: "王五" },
   { id: 4, name: "赵六" }
]
p.data(dataset).text(function (d) { return d.id + ":" + d.name })

<p>1:张三</p>
<p>2:李四</p>
<p>3:王五</p>
<p>4:赵六</p>

• 选择集的处理

// enter处理方法,没有足够的元素,那处理方法就是添加
var dataset = [3,6,9]
var p = d3.select("body").selectAll("p")
var update = p.data(dataset)
var enter = update.emter()
// 处理方法是直接修改内容
update.text()
// 添加元素后在修改内容
enter.append("p").text(function(d){return d})

• 过滤器

filter(): 根据条件获取选择集的一部分子集
sort(): 排列
each(): 遍历
call(): 

• 排序

sort(d3.ascending):默认参数,递增
sort(d3.descending):递减

var numbers = [10,20,30]
d3.min(numbers) //最小值
d3.max(numbers) //最大值
d3.extent(numbers) //[最小值,最大值]
d3.sum(numbers) //总和
d3.mean(numbers) // 平均数
d3.median(numbers) //中间值
d3.quantile(numbers,p) // 分位点的值,p[0,1]
d3.variance(): 方差
d3.deviation(): 求标准差
d3.bisectLeft(): 某数组项左边的位置
d3.bisect(): 某数组项右边的位置
d3.bisectRight(): 和bisect()一样

• 操作数组

d3.shuffle(): 随机排列
d3.merge(): 合并
d3.pairs(): 返回邻接的数组对
d3.range(start,stop,step): 返回等差数列
d3.permute(): 根据指定的索引进行排列
d3.zip(): 多个数组来制作数组的数组
d3.transpose(): 求转置矩阵

• 映射

d3.map(): 构造映射
map.has(key): key存在返回true
map.get(key): key存在,返回对应的value
map.set(key,val):修改
map.remove(key):移除 
map.keys():返回所有dekey
map.values(): 返回所有的value
map.entries(): 返回所有的key和value
map.forEach()
map.empty() 映射为空,返回true
map.size() 映射的大小

• 集合

d3.set():构建集合,不能有重复
set.has(): 是否包含指定集合
set.add(): 如果集合中没有指定元素,则添加
set.remove(): 有该元素,删除并返回true
set.values(): 以数组形式返回
set.forEach()
set.empty(): 集合为空则返回true
set.size()返回集合大小

• 嵌套结构

d3.nest()
nest.key() 指定嵌套结构的键
nest.entries() 将数组用于构造嵌套结构
/**
[{key:1987,values:[{key:"北京",values:[{id:101,name:"李某某",year:1987,hometown:"北京"}]}]}]
*/
nest.sortKeys()
nest.sortValues()
nest.rollup()
nest.map()