需要更多色彩的
不是代码,而是生活

重写d3.js的attr,style方法,支持传入对象设置多个属性

jquery的attr方法不仅可以设置单个属性如$('div').attr('width','100px'),也可以传入对象支持多个属性一起设置如$('div').attr({width:'100px',height:'200px'}),无奈d3.js却只能以第一种方式使用d3.select('div').attr('width','100px'),而d3.select('div').attr({width:'100px',height:'200px'})这样用是不起作用的,对于一个强迫症来说,绝对忍受不了这种缺陷,于是重写了d3的attr方法,支持传入对象设置多个属性。

let oldAttr = d3.selection.prototype.attr;
d3.selection.prototype.attr = function() {
    if (arguments.length == 1) {
        if (typeof arguments[0] == 'object') {
            for (let item in arguments[0]) {
                oldAttr.call(this, item, arguments[0][item]);
            }
            return this;
        } else {
            return oldAttr.call(this, arguments[0]);
        }
    } else if (arguments.length == 2) {
        return oldAttr.call(this, arguments[0], arguments[1]);
    }
};

测试一下

d3.select('body')
    .append('svg')
    .attr({ width: '100%', height: '100%' });

成功!

style亦可同理:

let oldStyle = d3.selection.prototype.style;
d3.selection.prototype.style = function() {
    if (arguments.length == 1) {
        if (typeof arguments[0] == 'object') {
            for (let item in arguments[0]) {
                oldStyle.call(this, item, arguments[0][item]);
            }
            return this;
        } else {
            return oldStyle.call(this, arguments[0]);
        }
    } else if (arguments.length == 2) {
        return oldStyle.call(this, arguments[0], arguments[1]);
    }
};
赞(2) 打赏
未经允许不得转载:代码一线 » 重写d3.js的attr,style方法,支持传入对象设置多个属性
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就支持一下本站

支付宝扫一扫打赏

微信扫一扫打赏