是否使用d3.js从下拉选择列表中的数据创建唯一对?

xxb16uws  于 2022-11-12  发布在  其他
关注(0)|答案(1)|浏览(118)

我想只使用对象中的唯一值填充下拉列表(选择标记)。
这是包含数据的对象:

[
    {
        "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

问题是显示了重复的值,而不是每个代码只显示一个值/abbr,如下所示:

<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获得unique,如下所示:

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

但是我只能和缩写一起工作。我怎么能得到代码呢?
已尝试[... new Set(data.map(d => [d.abbr, d.code))],但没有成功,因为这将再次创建一个包含所有未筛选数据的数组对象。

1rhkuytd

1rhkuytd1#

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

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
第一个

相关问题