函数链中的 D3 console.log

Question

D3 中是否有允许“内联”日志记录的基本函数/对象？

我正在阅读 Scott Murry 的漂亮的 D3 书并想这样做：

  d3.select("body").selectAll("div")
    .log("body")
    .data(dataset)
    .log("data")
    .enter()
    .log("enter")
    .append("div")
    .log("div")
    .attr("class", "bar")
    .log("class");

我目前正在做这件可怕的事情：

const log = function (msg, val) {
  const data = val ? val : this
  const label = msg ? msg : "data:"
  console.log(label, data)
  return data
}

Object.prototype.log = log

这工作正常，产生这个可点击的控制台输出： 但是.. D3 的方法是什么？

Answer 1

要在您的链中记录数据，您可以只使用一个假属性：

d3.select("body").selectAll("div")
  .data(dataset)
  .enter()
  .append("div")
  .attr("fake", d=> console.log(d));

对于其他事情，我认为没有允许登录的“d3”方式，可悲的是，我认为您必须以正常方式进行：

console.log(d3.select("body").selectAll("div").data(dataset).enter());

Answer 2

您可以通过修改 d3 选择原型来使用您的解决方案（与对象原型相反，我认为这不会被认为是“可怕的”——尽管我有点倾向于在内部搞乱 d3），但我觉得你正在寻找selection.call()。

如果您想访问当前选择，但不想中断方法链，selection.call则可能是您最好的选择：

只调用一次指定的函数，并传入此选择以及任何可选参数。返回此选择。（文档）

被调用函数的第一个参数将是选择，其他可选参数可以在调用方法本身中传递。一般形式为：

selection.call(func, arg, arg, ...)

function func(selection, arg, arg, ...) {}

使用selection.call这种方法进行日志记录应该不会太难。这是一个快速模型（v4/5）：

var dataset = d3.range(10);

  d3.select("body").selectAll("div")
    .call(log,"body")
    .data(dataset)
    .call(log,"dataset")
    .enter()
    .call(log,"enter")
    .append("div")
    .call(log,"div")
    .attr("class", "bar")
    .call(log,"bar");

function log(sel,msg) {
  console.log(msg,sel);
}

结果：

这是正在运行的模型。

Answer 3

我想到的第一件事是 Andrew Reid 在他的回答中提出的方法使用selection.call(). 虽然那个解决方案很好，但我认为可以通过直接扩展 D3 的选择来改进它。文档上d3.selection()明确指出此函数可用于扩展选择原型。

您可以按照以下方式创建自己的记录器：

const logger = {
  log() {
    console.log(...arguments);
    return this;
  }
}

这可以很容易地混合在d3.selection.prototype：

Object.assign(d3.selection.prototype, logger);

简单的方法logger.log()只记录传递给控制台调用的所有参数，并通过返回来促进方法链接this，它指的是选择本身。

当然，人们可以很容易地想象出更多有用的记录方法来打印属性、选择、数据等等。以下演示扩展了基本概念：

const logger = {
  log() {
    console.log(...arguments);
    return this;
  }
}

Object.assign(d3.selection.prototype, logger);