D3 –比較並傳遞來自多個數據集的對象值

Question

恐怕是一個完整的初學者問題。 來自多個對象數組，例如：

    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>

我正在嘗試掌握地圖並獲取功能，但是暫時迷失了方向。 在此先感謝您的放心。

Answer 1

查看有關綁定嵌套結構的本教程： https : //bost.ocks.org/mike/nest/#data 。 創建父div之后，您可以在它們上調用.data將數據綁定到其子對象，如下所示：

 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(ct2); continent.enter().append('div').attr('id', function(d) { return dl }); var p = continent.selectAll('p').data(function(d) { var cc = []; countries.forEach(function(x) { if (x.ctt == d.key) { cc.push(x.name); } }); return cc; }); p.enter().append('p').text(function(d) { return d }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>