需要"d3-select-multi"，因为节点模块不起作用

Question

我通过npm安装了d3，并直接(出于某种原因)在我的脚本中要求它

因此：

npm install d3

然后

var d3 = require("d3");

工作良好。

现在的问题是，我需要"d3选择多"模块。

我也通过npm 安装了它

npm install d3-selection-multi

在我读到的d3 Doku中，你可能需要不同的模块，比如：

var d3 = Object.assign({}, require("d3-format"), require("d3-geo"), require("d3-geo-projection"));

我根据自己的需要改变了这一点，那就是使用标准的d3-bundle(上面已经使用过了)，并添加d3选择multi。

var d3 = Object.assign({}, require("d3"), require("d3-selection-multi"));

然而，这并不奏效。所以我通过打印出结果对象来测试它：

console.log(d3)

结果是正确的：

{version: "4.11.0", bisect: ƒ, bisectRight: ƒ, bisectLeft: ƒ, ascending: ƒ, …}

但"d3选择多"模块并不存在。我能看到，因为它不把d3.selectAll().styles识别为一个函数。

我尝试了以下操作：而不是

var d3 = Object.assign({}, require("d3"), require("d3-selection-multi"));

我只是需要d3选择多看看它是否有效：

var d3 = require("d3-selection-multi");

并且CCD_ 11的结果是{ }一个空对象。

因此，如果这个对象不包含任何内容，那么Object.assign显然也不会向d3标准束添加任何内容。但为什么它是空的？我错过什么了吗？

Answer 1

从你的问题中，很难确定你到底遇到了什么让你确信这不起作用，所以我猜测是这样的：

但是"d3选择多"模块不存在。我能看到，因为它不把d3.selectAll().styles识别为一个函数。

让我们从头开始。

Object.assign将一个或多个源对象的可枚举属性复制到单个目标对象。这对于创建对象的浅层副本非常有用——例如，允许您在不必操作源对象的情况下操作目标对象——或者使用源对象的属性组成新对象。

const foo = { a: 1 };
const bar = { b: 2 };
const baz = Object.assign({}, foo, bar);
console.log(baz.a);
// 1

正如您所观察到的，d3-selection-multi导出一个空对象。因此，尝试使用Object.assign导致创建了一个空对象，将d3可枚举属性复制到该空对象，并将空d3-selection-multi对象的可枚举属性(nothing)复制到该初始空对象。

事实上，d3-selection-multi所做的是直接从d3-selection和d3-transition修改selection和transition原型。

您应该能够通过以下琐碎的例子来验证这一点：

const d3 = require('d3');
require('d3-selection-multi');
console.log(d3.selectAll().styles);
console.log(d3.selectAll().attrs);
// [Function: selection_styles]
// [Function: selection_attrs]

也就是说，您应该看到与您的原始方法相同的结果：

const d3 = Object.assign({}, require('d3'), require('d3-selection-multi'));

如果您确实能够以这种方式访问d3.selectAll().styles和attrs，但仍然存在问题，那么我们需要看到确切的实现代码以及控制台输出。