Question

当
"use strict";

对我的D3JS强制网络图有效，我无法使用this.getBBox();使用代码在强制网络图中旋转边标签文本：

edgelabels.attr('transform',function(d,i){
  if (d.target.x<d.source.x){
    bbox = this.getBBox();
    rx = bbox.x+bbox.width/2;
    ry = bbox.y+bbox.height/2;
    return 'rotate(180 '+rx+' '+ry+')';
  }
  else { return 'rotate(0)'; }
});

如果我禁用"use strict;"我的代码运行没有错误，标签正确旋转。小提琴： https://jsfiddle.net/NovasTaylor/cnaqaxnh/

我将原始代码基于此块： http://bl.ocks.org/jhb/5955887

我的代码如何通过getBBox（）或getBBox（）的替代方法使用"use strict;"来修复运行？

Answer 1

此处的问题不是getBBox()，而是缺少var：在非严格模式下，对未声明变量的赋值将该变量视为全局变量。但是，这不会在严格的模式下工作。

如果你看一下关于严格模式的MDN page：

首先，严格模式使得无法意外创建全局变量。在正常的JavaScript错误输入中，赋值中的变量会在全局对象上创建一个新属性，并继续＆＃34; work＆＃34; （虽然未来的失败是可能的：可能，在现代JavaScript中）。意外创建全局变量的赋值将以严格模式抛出。（强调我的）

所以，而不是：

edgelabels.attr('transform', function(d, i) {
    if (d.target.x < d.source.x) {
        bbox = this.getBBox();
        rx = bbox.x + bbox.width / 2;
        ry = bbox.y + bbox.height / 2;
        return 'rotate(180 ' + rx + ' ' + ry + ')';
    } else {
        return 'rotate(0)';
    }
});

应该是：

edgelabels.attr('transform', function(d, i) {
    if (d.target.x < d.source.x) {
        var bbox = this.getBBox();
        var rx = bbox.x + bbox.width / 2;
        var ry = bbox.y + bbox.height / 2;
        return 'rotate(180 ' + rx + ' ' + ry + ')';
    } else {
        return 'rotate(0)';
    }
});

这是更新的小提琴：https://jsfiddle.net/onnoqyp4/

“use strict”

1 个答案: