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中的点函数主要返回选择引用，为什么片段不会生成相同的DOM内容？

Answer 1

在运行第二个脚本之前是否刷新了内容？如果在运行任何一个之前刷新，则两个脚本都会给出相同的结果。或者在运行第一个脚本并尝试运行第二个脚本后，您是否清空了文本内容？如果是这样，那么屏幕上不会显示任何内容，因为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

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

＆＃13;

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";
    }
  });

＆＃13;

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

2 个答案: