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();
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值