d3.IE 中的选择类型检查

2023-12-09

如何检查给定对象是否是d3选择?

下面的代码打印true在 Chrome 和 Firefox 中,但是false在 Internet Explorer 中:

console.log(d3.select(document.body) instanceof d3.selection)

更新2017-01-17

随着 D3 的发布v4这个问题已经消失了(变更日志):

选择不再使用 Array 的子类原型链注入;它们现在是普通对象,提高了性能。

和APIdocs明确指出:

# d3.选择() <>

[…]此功能还可用于测试选择(instanceof d3.selection)

使用新版本,以下代码实际上在所有浏览器中都会计算为 true:

d3.select() instanceof d3.selection   // true in Chrome, FF, IE

对于所有仍在使用 v3 的人,下面的原始答案提供了问题的分析和解决方法。


Problem

由于 D3 的内部工作原理,每个支持的浏览器Object.prototype.__proto__将打印true,而浏览器缺乏支持__proto__将打印false。检查兼容性列表很明显,IEfalse。因此,您将无法使用instanceof d3.selection检查 IE已知问题与D3,但它已关闭并且不会得到修复。

Analysis

来自 D3 的 github 存储库:

  1. selection/selection.js

看一下定义d3.select()这是您的呼叫的入口点:

d3.select = function(node) {
  // ... removed for brevity

  return d3_selection([group]);
};

这最终将返回调用的结果d3_selection(),这又将子类化d3_selectionPrototype = d3.selection.prototype.

function d3_selection(groups) {
  d3_subclass(groups, d3_selectionPrototype);
  return groups;
}
  1. core/subclass.js

最后,实施d3_subclass()提供了问题的答案:

var d3_subclass = {}.__proto__?

// Until ECMAScript supports array subclassing, prototype injection works well.
function(object, prototype) {
  object.__proto__ = prototype;
}:

// And if your browser doesn't support __proto__, we'll use direct extension.
function(object, prototype) {
  for (var property in prototype) object[property] = prototype[property];
};

它检查浏览器是否支持Object.prototype.__proto__通过检查是否存在__proto__空对象上的访问器属性{}。如果浏览器支持,D3将直接分配原型,从而使其成为d3.selection。否则,原型的所有属性将被复制到要返回的对象,而无需显式设置原型。在这种情况下,您的表达式将计算为false.

解决方法

Because d3.selection提供作为扩展选择功能的一种方法,您可以通过添加新属性来实现解决方法d3.selection正如上面所解释的,可以通过任何选择来访问它,无论是通过原型设计还是通过复制属性。

// Include this at the start of your script to include the
// property in any selection created afterwards.
d3.selection.prototype.isD3Selection = true;

console.log(d3.select(document.body).isD3Selection);   // true in any browser
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

d3.IE 中的选择类型检查 的相关文章

  • 寻找一种重构 D3.js 风格的方法链接模式的方法

    在学习 D3 js 时 我遇到了博客文章 http bost ocks org mike chart 解释其可重用代码单元背后的主要设计模式 我复制了下面的相关代码 下面呈现的模式的方式正是在 D3 代码库和插件中使用的方式 example
  • d3.js V4 按钮缩放实现表现得很奇怪

    我正在尝试实现 d3 平移和缩放功能 默认的平移和缩放工作正常 但要求是我们还需要放大和缩小按钮 我还实现了缩放按钮 它也有效 奇怪的是 当我第一次移动图像并单击缩放按钮时 图像会移回到以前的位置 不仅是当我第一次用鼠标缩放并使用按钮再次开
  • 我可以补间 D3 弧的结束角度,但不能补间起始角度。我究竟做错了什么?

    我只是在玩这个演示并自己重新创建它 http bl ocks org mbostock 5100636 http bl ocks org mbostock 5100636 我可以定义一个新的 endAngle 并且它会很好地制作动画 但现在
  • 在 d3v4 堆积条形图中使用 JSON

    我找到了一个d3v3堆积条形图示例 http bl ocks org mstanaland 6100713我想使用它 因为它使用 json 数据 还有一个d3v4规范条形图示例 https bl ocks org mbostock 3886
  • 如何使用 D3 (或只是 javascript)将表单选项设置为“选择”

    有没有一种方法可以搜索选择表单元素中的所有选项 并将具有匹配值的选项指定为 已选择 var xStat G var statOptions Points PTS Goals G Assists A Penalty Minutes PIM c
  • D3 旭日弧尺寸

    我正在尝试根据以下示例创建 D3 旭日图 https bl ocks org maybelinot 5552606564ef37b5de7e47ed2b7dc099 https bl ocks org maybelinot 55526065
  • d3.js 更新视觉效果

    我有一个与 d3 js 放在一起的树形图 我通过 getJSON 填充数据 效果很好 但是 我在 setInterval 方法中具有此功能 并且它似乎并没有刷新自身 var treemap d3 layout treemap padding
  • D3 v4 在同一元素上进行画笔和缩放(鼠标事件不冲突)

    我的目标是构建一个使用两者的 D3 v4 图表d3 zoom https github com d3 d3 zoom and d3 brush https github com d3 d3 brush一起 如下 当鼠标位于 x 轴上时 用户
  • 需要帮助绘制多元线之间的区域 - 而不是从轴到线

    我是 d3 js 的新手 我正在努力填充多元百分位数图中线条之间的区域 我不希望在最底线下方或最顶线上方填充任何区域 第一列始终位于图表的底部 第 5 个百分位 最后一列将始终位于图表的顶部 第 95 个百分位 我需要每条线之间单独的区域段
  • 如何将此数据编码为 JSON 中的父/子结构

    我正在使用 d3 js 将动物 有机体 家族 一次最多 4000 个 可视化为树形图 尽管数据源也可以是目录列表或命名空间对象列表 我的数据如下 json organisms name Hemiptera Miridae Kanakamir
  • 如何根据形状字段值将两个不同的形状添加到 D3 力向图?

    我是D3的新手 我正在使用力定向图 我想在节点的位置添加两种不同类型的形状 我的 json 如下 nodes name 00 00 00 00 00 00 00 01 group 0 shape 1 name 00 00 00 00 00
  • 在 Crossfilter 中使用过滤器

    我刚刚开始使用 crossfilter 和 d3 js 我正在尝试 API 参考中给出的一些片段 我有以下数据 var payments crossfilter date 2011 11 14T16 17 54Z quantity 2 to
  • 如何在 SVG 元素上使用箭头标记?

    我需要在 d3 js 中创建一个箭头 但我找到的只是带有节点图的示例 我需要的是简单地制作一个从 A 点到 B 点的箭头 我尝试实现以下示例中的部分代码 http bl ocks org 1153292 http bl ocks org 1
  • D3 围绕一组圆圈绘制船体

    我想用 d3 围绕分组力定向图构建绘制一个船体 我已经用圆圈构建了图表 但我现在想将圆的交点与路径 船体 连接起来 如果不连接交叉点 画一个围绕这组圆的船体就足够了 我尝试过具有凸包的力导向布局 http bl ocks org 29205
  • 如何根据D3中的数据创建元素?

    看着sample https github com mbostock d3 wiki Selections wiki data d3 select body selectAll div data 4 8 15 16 23 42 enter
  • D3更新circle-pack数据新节点与现有节点重叠

    我正在关注一般更新模式 http bl ocks org mbostock 3808234但在分层方面存在问题 使用圆形包装布局 我pack新数据 update enter and exit圆形元素 然而 当新元素enter 它们重叠upd
  • d3.js比例符号图:根据数据值设置圆的半径

    我正在遵循这个关于如何使用 d3 js 和 mapbox 制作地图的精彩示例 https franksh com posts d3 mapboxgl https franksh com posts d3 mapboxgl 它工作得很好 除了
  • 平移/缩放顺序尺度?

    我正在使用 d3 渲染简化的甘特图 并使用 d3 behavior zoom 进行平移和缩放 x 刻度是一个时间刻度 稍微修改为列中的中心日历日等 并且工作得很好 但是我在决定如何缩放 平移 y 刻度时遇到问题 其域是通常会出现的任务列表图
  • 如何从此 d3.js layout.tree 获取树祖先和树后代的列表?

    我正在尝试和修改this https bl ocks org mbostock 4339083d3 js 的示例 用于根据 JSON 树结构绘制树 这就是树的一部分开始时的样子 我正在尝试进行两个单独的修改 但我不知道该怎么做 当单击节点的
  • 合并两个 csv (d3)

    我使用以下代码加载两个 csv 文件 d3 csv sqrt100train csv function error data2 d3 csv sqrt100test csv function error data sqrt100train

随机推荐