如何调试 D3 中的 data() 调用？

Question

我正在尝试使用此示例代码，但它不正确：

var aaa = ["a","b","c"];
d3.selectAll(".none").data(aaa).enter().call(function(d) {console.log(d);});

或者

var aaa = ["a","b","c"];
d3.selectAll("html").data(aaa).enter().call(function(d) {console.log(d);});

Answer 1

D3 允许您将任意数据绑定到文档对象模型 (DOM)，然后将数据驱动的转换应用于文档。

您需要通过定义我们将连接数据的选择来启动数据连接：

var bar = chart.selectAll("div");

之后，您需要使用 Selection.data 将数据（之前定义的）加入到选择中。

var barUpdate = bar.data(data);

但是选择是空的，因此您需要通过附加到输入选择来实例化这些缺失的元素。

var barEnter = barUpdate.enter().append("div");

因此，您将为每个数据创建一个 DOM 对象。您可以设置关联数据值 d 的任何所需属性（类、id...）。

barEnter.attr("class", function(d) { return d * 10 + "px"; });

关于您的问题，您可以在为每个数据创建每个对象时调试数据，如下所示：

var Viz = d3.select(".myViz")
            .selectAll("div")
            .data(aaa)
            .enter().append("div")
            .attr("class", function(d) { console.log(d); });

希望能帮助到你。

Answer 2

尽管 @HugoLasticot 的答案非常有帮助和解释性，但有人可能会补充说，您可以使用该构造call()来运行任意函数。

d3node
  .select(".selector")
  .call((d) => console.log(d))

这可能会在调试时帮助您。

这是 d3 函数的完整列表。