Question

我正在使用d3v4并且在html文档中我有20个g.node元素，其中4个具有值：d.nameY ===“响应否”。

以下陈述正确无误：

d3.select("g.sankeyFrame.single")
            .selectAll("g.node")
            .filter( function(d) { return d.nameY === "responded No";})
            .size();

根据需要返回4.

但是，以下数据连接不会返回预期的选择：

d3.select("g.sankeyFrame.single")
            .selectAll("g.node")
            .data(["responded No"], function(d){ return d.nameY;})
            .size();

它返回0，它应该返回所有4个g.node元素，其中d.nameY === 4。

有什么可能阻止数据连接工作的原因？（代码库太大，无法在此发布）

Answer 1

有什么可能的原因阻止数据加入工作？

完全没有理由。正在工作。结果没有错，这是预期的行为。你有另一个问题。

为了向您展示问题，让我们创建一个非常简单的演示，它会添加20 <div>个，其中4个带有基准"foo"。以下是使用您的第一种方法的代码filter：

var p = d3.select("body")
  .selectAll(null)
  .data(d3.range(20).map(function(d) {
    return d < 4 ? "foo" : "bar"
  }))
  .enter()
  .append("div")
  .html(String);

var filtering = d3.selectAll("div")
  .filter(function(d) {
    return d === "foo"
  }).size();

console.log("size is: " + filtering)

<script src="https://d3js.org/d3.v4.min.js"></script>

现在让我们看看你的第二种方法：

d3.select("g.sankeyFrame.single")
        .selectAll("g.node")
        .data(["responded No"], function(d){ return d.nameY;})
        .size();

这里有两个问题：

关键功能不起作用。像nameY这样的简单扁平数组中没有属性["responded No"]。这就是您的选择大小为0。
该数组中只有一个元素。因此，即使您删除了错误的键功能，该选择也只有一个元素。我们来证明一下：

var p = d3.select("body")
  .selectAll(null)
  .data(d3.range(20).map(function(d) {
    return d < 4 ? "foo" : "bar"
  }))
  .enter()
  .append("div")
  .html(String);

var dataBinding = d3.selectAll("div")
  .data(["baz"])
  .size();

console.log("size is: " + dataBinding)

<script src="https://d3js.org/d3.v4.min.js"></script>

第2点是最重要的一点：data()返回的更新选择的大小是其数组的大小。

最后，为了清楚地表明data()正在运作，让我们看看每个<div>的基准：

var p = d3.select("body")
  .selectAll(null)
  .data(d3.range(20).map(function(d) {
    return d < 4 ? "foo" : "bar"
  }))
  .enter()
  .append("div")
  .html(String);

var dataBinding = d3.selectAll("div")
  .data(["baz"])
  .size();

d3.selectAll("div").each(function(d, i) {
  console.log("div number " + i + " - datum: " + d)
})

<script src="https://d3js.org/d3.v4.min.js"></script>

d3.js数据连接显示奇怪的结果

1 个答案: