Javascript D3–比较并传递来自多个数据集的对象值

恐怕这是一个完全初学者的问题。来自多个对象数组，如：

    var ct1 = [
{name: "Africa", id: 1},
{name: "America", id: 2},
{name: "Asia", id: 3},
{name: "Europe", id: 4},
{name: "Oceania", id: 5}
];
    var ct2 = [
{key: "Africa", l: "AF"},
{key: "Asia", l: "AS"},
{key: "Europe", l: "EU"}
];
    var countries = [
{name: "Togo", ctt: "Africa"},
{name: "India", ctt: "Asia"},
{name: "Iran", ctt: "Asia"},
{name: "Peru", ctt: "America"}
];

我试图在两个上下文中检索所选内容中的公共值：

var continent = d3.select("body").selectAll("div").data(c1)
// Here I would like to filter the data, 
// in order to get only the number of divs whose keys match the names in c1
.append("div");
continent.append("p")
// Here, I would like to create paragraphs for each object in countries
// whose "ctt" is also present in "c1", retrieving the name value in the process.

预期结果如下：

<div id="AF">
    <p>Togo</p>
</div>
<div id="AS"></div>
    <p>India</p>
    <p>Iran</p>
<div id="EU"></div>

---

我正试图抓住地图并获取函数，但现在我迷路了。非常感谢您的支持。

请查看有关绑定嵌套结构的教程：。创建父div后，可以调用其上的.data将数据绑定到其子级，如下所示：

变量ct1=[{ 名称：非洲， 身份证号码：1 }, { 名称：美国， 身份证号码：2 }, { 名称：亚洲， 身份证号码：3 }, { 名称：欧洲， 身份证号码：4 }, { 名称：大洋洲， 身份证号码：5 } ]; 变量ct2=[{ 关键：非洲， l:AF }, { 重点:亚洲,， l:是的 }, { 关键：欧洲， l:欧盟 } ]; var国家=[{ 姓名：多哥， ctt：非洲 }, { 名称：印度， ctt：亚洲 }, { 名称：伊朗， ctt：亚洲 }, { 姓名：秘鲁， ctt：美国 } ]; var=d3.selectbody.selectAlldiv.datact2； contraction.enter.append'div'.attr'id'，函数d{ 退票 }; var p=大陆。选择所有“p”。数据函数d{ var cc=[]； 国家外汇储备{ 如果x.ctt==d.key{ cc.pushx.name； } }; 返回cc； }; p、 enter.append'p'.textfunctiond{ 返回d };

---

我以为我在遵循逻辑，但当我将代码复制到html页面并在浏览器中打开它时，我只得到空div。你知道为什么会这样吗？再次非常感谢。@Robin我想你使用的是D3V4，对吗？这个答案使用过时的v3，它将把enter选择附加的元素添加到update选择中。然而，这在v4中不再适用；在该较新版本中，大陆仅保留对更新选择的引用。这个简单问题的最简单解决方案是合并两个相关语句，如：var contraction=d3.selectbody.selectAlldiv.datact2.enter.append'div'。。。。还有其他的方法，但最好的选择在很大程度上取决于整体情况。是的，我应该说明我使用的是D4。我想我没有把我的示例数据集做得与我的问题完全不同。我的问题是比较包含数千个对象的数据数组，以便在d3选择中传递一个系列的键，这些键将与另一个系列的ID相匹配。@Robin，过滤部分在.data中。。。您可以按照自己的意愿对查找逻辑进行编码。@编造者-我已经重新表述了我的问题，一开始可能还不够清楚，这里：。我得到的似乎正是过滤过程。非常感谢！