D3：选择顺序：样式和文本

Question

以下两个片段产生不同的输出：

d3.select("body").selectAll("p").data(dataset).enter().append("p")
  .style("color", function(d) {
    if (d > 10) {
      return "red";
    } else {
      return "black";
    }
  })
  .text(function(d) { return d; })

和

d3.select("body").selectAll("p").data(dataset).enter().append("p")
  .text(function(d) { return d; })
  .style("color", function(d) {
    if (d > 10) {
      return "red";
    } else {
      return "black";
    }
  })

第一个生成不同颜色的数字（使用特定的数据集数组），而第二个在屏幕上什么也不显示。

由于 D3 中的点功能主要是 return 选择参考，为什么这些片段不会生成相同的 DOM 内容？

Answer 1

您是否在运行第二个脚本之前刷新了内容。如果您在运行ning 任何一个之前刷新，两个脚本都会给您相同的结果。还是您在第一个脚本运行后清空文本内容并尝试运行第二个脚本？如果是这样，那么屏幕上不会显示任何内容，因为 enter() 已经看到所需数量的段落元素并且不会执行任何操作。如果您尝试使用下面显示的代码段（与您的第二个代码段类似）手动更新文本和颜色，您将获得所需的结果。

d3.select("body").selectAll("p")
.text(function(d) { return d; })
.style("color", function(d) {
  if (d > 10)
    return "red";
  else 
    return "black";
})

Answer 2

首先，在您的两个代码段中，您使用 'stype' 而不是 'style' 来更改文本颜色其次，第一段和第二段没有区别。两者都会产生相同的输出。但是，如果您在代码中同时编写了两者，那么您将只会得到一个输出。因为数据已经与 DOM 绑定。要获得多个输出，您可以 select 元素与不同的类而不是 "p" 元素。这是一个例子：

d3.select("body").selectAll("p.firstDiv").data(data).enter().append("p")
  .style("color", function(d) {
    if (d > 10) {
      return "red";
    } else {
      return "black";
    }
  })
  .text(function(d) { return d; });
  
  d3.select("body").selectAll("p.secondDiv").data(data).enter().append("p")
  .text(function(d) { return d; })
  .style("color", function(d) {
    if (d > 10) {
      return "red";
    } else {
      return "black";
    }
  });

D3：选择顺序：样式和文本

D3: order of selections: style and text

javascript

d3.js

selection