javascript - 使用 d3.js 下拉选择列表中的数据的唯一对？

Question

我想仅使用对象中的唯一值填充下拉列表(选择标签)。

这是带有数据的对象:

[
    {
        "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))]，但没有成功，因为这创建了一个包含所有内容的数组对象再次未过滤的数据。

Answer 1

d3 v7 中的新功能是 flatGroup它将返回一个数组，其中包含唯一的 code 和 abbr 对以及关联的数组对象:

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

如果您使用的是早期版本，则可以使用 Map获得类似的结果(但没有关联的数组对象):

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>