使用d3.js的下拉選擇串列中資料的唯一對？

我想用一個物件的唯一值填充一個下拉串列（選擇標簽）。

這是帶有資料的物件：

[
    {
        "code": 1,
        "abbr": "BR",
        "vote": 49277010
    },
    {
        "code": 1,
        "abbr": "BR",
        "vote": 31342051
    },
    {
        "code": 43,
        "abbr": "RS",
        "vote": 3353623
    },
    {
        "code": 31,
        "abbr": "MG",
        "vote": 3037957
    },
    {
        "code": 31,
        "abbr": "MG",
        "vote": 5017922
    },
    {
        "code": 35,
        "abbr": "SP",
        "vote": 2650440
    },
    {
        "code": 42,
        "abbr": "SC",
        "vote": 2603665
    },
    {
        "code": 1,
        "abbr": "BR",
        "vote": 71347057
    },
    {
        "code": 26,
        "abbr": "PE",
       "vote": 2309104
    }
]

以下是我如何獲取資料以構建下拉串列：

//initialize the dropdown
var dropdown = d3.select("#sel")

dropdown
    .selectAll('myOptions')
    .data(data)
    .enter()
    .append('option')
    .text(function (d) { return d.abbr; }) //text showed in the options
    .attr("value", function (d) { return d.code; }) //values returned by each option

問題是顯示重復的值，而不是每個代碼/縮寫只顯示一個值，如下所示：

<select id="sel">
  <option value="1">BR</option>
  <option value="1">BR</option>
  <option value="43">RS</option>
  <option value="31">MG</option>
  <option value="31">MG</option>
  <option value="35">SP</option>
  <option value="42">SC</option>
  <option value="1">BR</option>
  <option value="26">PE</option>
</select>

如何過濾資料以在選項中僅具有唯一值？

<select id="sel">
  <option value="1">BR</option>
  <option value="43">RS</option>
  <option value="31">MG</option>
  <option value="35">SP</option>
  <option value="42">SC</option>
  <option value="26">PE</option>
</select>

== 編輯 ==

我能夠使用 set 獲得唯一性，如下所示：

const selectedData = [... new Set(data.map(d => d.abbr))].sort();

但是我只能使用abbr。我怎么也能得到代碼？

嘗試過[... new Set(data.map(d => [d.abbr, d.code))]，但沒有成功，因為這會再次創建一個包含所有未過濾資料的陣列物件。

uj5u.com熱心網友回復：

d3 v7 中的新功能flatGroup將回傳一個陣列，其中包含唯一對code和abbr加上關聯的陣列物件：

d3.flatGroup(data, d => d.code, d => d.abbr);

如果您使用的是早期版本，則可以使用 aMap來獲得類似的結果（但沒有關聯的陣列物件）：

const uniqueData = Array.from(
  data.reduce((a, c) => {
    a.set(c.code, c.abbr);
    return a;
  }, new Map())
);

console.log(uniqueData);

下面的作業示例使用flatGroup：

const uniqueData = d3.flatGroup(data, d => d.code, d => d.abbr);

console.log(uniqueData);

//initialize the dropdown
var dropdown = d3.select("#sel")

dropdown
  .selectAll('myOptions')
  .data(uniqueData)
  .enter()
  .append('option')
  .text(function (d) { return d[1]; }) //text showed in the options
  .attr("value", function (d) { return d[0]; }) //values returned by

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.3.0/d3.min.js"></script>
<select id="sel">
</select>
<script>
const data = [
    {
        "code": 1,
        "abbr": "BR",
        "vote": 49277010
    },
    {
        "code": 1,
        "abbr": "BR",
        "vote": 31342051
    },
    {
        "code": 43,
        "abbr": "RS",
        "vote": 3353623
    },
    {
        "code": 31,
        "abbr": "MG",
        "vote": 3037957
    },
    {
        "code": 31,
        "abbr": "MG",
        "vote": 5017922
    },
    {
        "code": 35,
        "abbr": "SP",
        "vote": 2650440
    },
    {
        "code": 42,
        "abbr": "SC",
        "vote": 2603665
    },
    {
        "code": 1,
        "abbr": "BR",
        "vote": 71347057
    },
    {
        "code": 26,
        "abbr": "PE",
       "vote": 2309104
    }
];
</script>

標籤：javascript d3.js 下拉式菜单

上一篇：新版D3如何獲取節點？

下一篇：如何在React組件內渲染d3.js地圖？