d3.js数据连接显示奇怪的结果 [英] d3.js data join shows strange result

问题描述

我使用的是d3v4，在html文档中，我有20个g.node元素，其中4个的值是:d.nameY ===已响应".

I am using d3v4 and within the html document I have 20 g.node elements, with 4 having the value: d.nameY === "responded No".

以下语句正确运行:

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

它根据需要返回4.

但是，以下数据联接未返回预期的选择:

However, the following data join doesn't return the expected selection:

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

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

It returns 0, it should return all 4 g.node elements, where d.nameY === 4.

什么可能的原因导致数据联接无法正常工作? (代码库太大，无法在此处发布)

What possible reason prevents the data join from working? (The code base is too large to publish here)

推荐答案

什么可能的原因导致数据联接无法正常工作?

What possible reason prevents the data join from working?

完全没有理由.它正在工作.结果没有错，这就是预期的行为.您在这里还有另一个问题.

No reason at all. It is working. And the result is not wrong, that's the expected behaviour. You have another problem here.

为了向您展示问题，让我们创建一个非常简单的演示，在该演示中追加20个<div>，其中4个带有基准"foo".这是使用第一种方法的代码，使用filter:

To show you the problem, let's create a very simple demo, which appends 20 <div>s, 4 of them with the datum "foo". Here is the code using your first approach, with 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>

现在让我们看看您的第二种方法:

Now let's see your second approach:

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

您在这里有两个问题:

1. 键功能不起作用.在像["responded No"]这样的简单平面数组中没有属性nameY.这就是为什么您选择的尺寸为0.
2. 该数组中只有一个元素.因此，即使您删除了错误的按键功能，该选择也会只有一个元素.让我们证明一下:

1. The key function will not work. There is no property nameY in a simple, flat array like ["responded No"]. That's why your selection's size is 0.
2. There is just one element in that array. So, even if you remove the wrong key function, that selection will have just one element. Let's prove it:

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>

第二点最重要:data()返回的更新选择的大小是其数组的大小.

That point #2 is the most important here: the size of the update selection returned by data() is the size of its array.

最后，为了清楚地显示data()在起作用，让我们看一下每个<div>的数据:

Finally, to clearly show that the data() is working, let's see the datum of each <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数据连接显示奇怪的结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！