d3 (Data Driven Document)

d3.js官网：https://d3js.org/what-is-d3
下载
d3.v7.js：https://d3js.org/d3.v7.js
d3.v7.min.js：https://d3js.org/d3.v7.min.js
文章
&执念-d3 v5：https://www.cnblogs.com/zhinian-/p/12575441.html

---

选择器

var p = d3.select("body").selectAll("p");
// 添加文本
p.text('日照香炉生紫烟')
数据绑定
// datum()：绑定一个数据到选择集上
h3.datum('我是一只小小小小鸟').text(function (v,i) {
        return '我是第'+ i +'个h3标签，内容是：'+ v;
    })
// data()：绑定一个数组(可以是返回数组的函数)到选择集上，数组的各项值分别与选择集的各元素绑定
h3.data(array).text(function (v,i) {
        return '我是第'+ i +'个h3标签，内容是：'+ v;
    })
// .text() .html()参数为空则返回元素的文本，不为空则设置元素的文本
var text = h3.datum('我把内容改了看看').text();
var html = h3.datum('我把内容改了看看').html();
console.log(text);
console.log(html);
h3.datum('我把内容改了看看').text(function (d,i) {
return '<p>'+ d +'</p>';
});
h3.datum('我把内容改了看看').html(function (d,i) {
return '<p>'+ d +'</p>';
});
// Update 更新元素节点（绑定数据时默认进行的）

Enter 增加元素节点

Exit  删除元素节点
// 元素数量小于数组长度，append添加元素
h3.data(array).enter().append('h3').text(function (v, i) {
        return v;
    })
// 元素数量大于数组长度，exit退出绑定，多余的元素不变化
h3.data(array).exit();
// 删除多余的h3元素
h3.data(array).exit().remove();
// 设置属性值
h3.attr('title','我是一个h3标签');
//返回属性值
p.attr('title');
selection.style(name[, value[, priority]]);　　
h3.style('font-size','36px');
　　这个方法可以返回或修改style，priority默认为null，你可以在这个地方写“important”。
// 是否包含class
h3.classed('red');
// 添加class
h3.classed('red',true);
// 删除class
h3.classed('red',false);

插入元素
　　append('p')：在选择集内部尾部插入元素
　　insert('p')：在选择集内部尾部插入元素
　　insert('p','div')：在选择集内部的第一个div前面插入元素
// 删除选择集
p.remove();

比例尺

定义域(domain)、值域(range)和对应法则
var scaleLiner = d3.scaleLinear()
        .domain([0,2])
        .range([0,200])
    console.log(scaleLiner(0));//输出 0
    console.log(scaleLiner(1));//输出 100
    console.log(scaleLiner(2));//输出 200
序数比例尺
var color = ['blue','red','green','pink']
    var scaleOrdinal = d3.scaleOrdinal()
        .domain([0,1,2,3])
        .range(color)
    for (var i = 0; i < color.length; i++ ) {
        d3.select('body').append('div').text('颜色').style('color',scaleOrdinal(i));
    }

d3.max(),d3.min();