D3 v.4 —比较来自多个数据集的值 [英] D3 v.4 — Compare values from multiple datasets

问题描述

（这是我没有用足够精确的术语提出的问题；我对此表示歉意）。

(This is the reformulation of a question that I didn't ask in precise enough terms; my apologies for that).

我有一个数据比较问题。
我有两个数据集（此处已简化）：

I have a data comparison problem. I have two datasets (much simplified here):

var cat = {
    continents: [
        {
            name:"Africa",
            ab:"AF",
            countries: [
                {name:"Egypt",ab:"Eg"},
                {name:"Niger",ab:"Ng"}
            ]
        },
        {
            name:"America",
            ab:"AM",
            countries: [
                {name:"Brasil",ab:"Br"},
                {name:"Canada",ab:"Ca"},
                {name:"United States",ab:"Us"},
                {name:"Venezuela",ab:"Vz"}
            ]
        },
        {
            name:"Asia",
            ab:"AS",
            countries: [...]
        },
        {
            name:"Europe",
            ab:"EU",
            countries: [
                {name:"France",ab:"Fr"},
                {name:"Germany",ab:"Ge"},
                {name:"Greece",ab:"Gr"},
                {name:"Italy",ab:"It"},
                {name:"United Kingdom",ab:"Uk"}
            ]
        },
        {
            name:"Oceania",
            ab:"OC",
            countries: [...]
        }
    ]
},
{...}

var currentNodes = [
   {name:"Japan",continent:"AS",country:"Jp",x:200,y:50},
   {name:"Italy",continent:"EU",country:"It",x:50,y:400},
   {name:"Bologna",continent:"EU",country:"It",x:180,y:100},
   {name:"Florence",continent:"EU",country:"It",x:50,y:200},
   {name:"Germany",continent:"EU",country:"Ge",x:350,y:430},
   {name:"Canada",continent:"AM",country:"Ca",x:180,y:400}
]

我正在尝试以存在的条件（作为大陆和国家）在每个大陆（以及第二阶段，每个国家）中检索 ab的值）中的currentNodes设置（以便能够更新它们）。

I am trying to retrieve for each continent (and, at a second stage, each country) the values of "ab" on the condition that they are present (as "continent" and "country") in the currentNodes set (in order to be able to update them).

如果我正确理解，以下内容将返回我的currentNodes数组中的所有对象：

If I understand correctly, the following just returns all objects in my currentNodes array:

d3.select('#nav').selectAll('p').data(cat.continents).enter()
    .insert('p').text(function(d) {
        var filteredNodes = currentNodes.filter(function(f) {
            return d.ab == f.continent;
        })
        return filteredNodes;})

-但我不为何无法选择以下值：

— but I don't get why I cannot select the relevant values with:

d3.select('#nav').selectAll('p').data(cat.continents).enter()
    .insert('p').text(function(d) {
        var filteredNodes = currentNodes.filter(function(f) {
            return d.ab == f.continent;
        })
        return filteredNodes.ab;})

我很乐意寻求解决方案，但也希望了解我在这里遇到的问题。

I would be happy for a solution, but also to understand what I'm getting wrong here. Many thanks in advance for your help — and leniency!

推荐答案

看看您的 currentNodes

Have a look at your currentNodes array. There is no property called ab in it. That's a property of cat.continents instead.

因此，如果我正确理解您想要的内容，则可以进行映射 currentNodes 数组中的大陆：

Thus, if I correctly understand what you want, you can map the continents in currentNodes array:

var continentList = currentNodes.map(function(d) {
    return d.continent
}) 

然后检查如果新数组中存在 ab ：

And check if ab exists in that new array:

.text(function(d) {
    return continentList.indexOf(d.ab) > -1 ? d.ab : "not in list";
})

在这里，我使用三元运算符和字符串 not in list作为错误条件。

Here, I'm using a ternary operator and a string "not in list" for the false condition.

这里是演示：

var cat = {
  continents: [{
    name: "Africa",
    ab: "AF",
    countries: [{
      name: "Egypt",
      ab: "Eg"
    }, {
      name: "Niger",
      ab: "Ng"
    }]
  }, {
    name: "America",
    ab: "AM",
    countries: [{
      name: "Brasil",
      ab: "Br"
    }, {
      name: "Canada",
      ab: "Ca"
    }, {
      name: "United States",
      ab: "Us"
    }, {
      name: "Venezuela",
      ab: "Vz"
    }]
  }, {
    name: "Asia",
    ab: "AS",
    countries: [{
      name: "Foo",
      ab: "Fo"
    }, {
      name: "Bar",
      ab: "Ba"
    }]
  }, {
    name: "Europe",
    ab: "EU",
    countries: [{
      name: "France",
      ab: "Fr"
    }, {
      name: "Germany",
      ab: "Ge"
    }, {
      name: "Greece",
      ab: "Gr"
    }, {
      name: "Italy",
      ab: "It"
    }, {
      name: "United Kingdom",
      ab: "Uk"
    }]
  }, {
    name: "Oceania",
    ab: "OC",
    countries: [{
      name: "Foo",
      ab: "Fo"
    }, {
      name: "Bar",
      ab: "Ba"
    }]
  }]
};

var currentNodes = [{
  name: "Japan",
  continent: "AS",
  country: "Jp",
  x: 200,
  y: 50
}, {
  name: "Italy",
  continent: "EU",
  country: "It",
  x: 50,
  y: 400
}, {
  name: "Bologna",
  continent: "EU",
  country: "It",
  x: 180,
  y: 100
}, {
  name: "Florence",
  continent: "EU",
  country: "It",
  x: 50,
  y: 200
}, {
  name: "Germany",
  continent: "EU",
  country: "Ge",
  x: 350,
  y: 430
}, {
  name: "Canada",
  continent: "AM",
  country: "Ca",
  x: 180,
  y: 400
}];

var continentList = currentNodes.map(function(d) {
  return d.continent
})

d3.select("body").selectAll(null)
  .data(cat.continents)
  .enter()
  .append('p')
  .text(function(d) {
    return continentList.indexOf(d.ab) > -1 ? d.ab : "not in list";
  })

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

我怀疑您不想显示不在列表中的大洲。在这种情况下，最好的方法是在将数据绑定到元素之前（在回车选择中）之前过滤数据数组。

I suspect that you don't want to show the continents "not in list". In that case, the best idea is filtering the data array before binding the data to the elements (in the enter selection).

这篇关于D3 v.4 —比较来自多个数据集的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！