javascript - 使用变量访问 d3 中的嵌套 json 键

Question

我正在尝试找出访问 d3 中嵌套 json 数据的最佳方法。

所以我的数据看起来像这样:

{
    "Florida":{"New York": "yellow",
                "New Jersey": "blue",
                "Pennsylvania": "green",
etc..

我的 d3.select 函数看起来像:

    .selectAll("path")
.style('fill', function(d){
                                    return jsondata.state[d.properties.NAME];

当然，这里的var state是一个变量，它应该指的是“Florida”，但事实并非如此。

我认为有两种方法:

1. 使用概述的一些解析方法 in this post 。即.get()方法

2. 以某种方式使用 d3.nest() 并将我的数据在 .style 函数之前汇总到可访问的对象中。

最好的方法是什么？

Answer 1

您可以使用序数标度，并根据选择的状态及其数据更改其域和范围。

创建没有域或范围的比例:

var color = d3.scale.ordinal();

然后当选择一个状态时，获取其名称，并获取其对应对象的d3.entries:

var entries = d3.entries(yourData[selectedState]);

然后将尺度的域和范围分别设置为键和值:

color.domain(entries.map(function(d) {return d.key;}));
color.range(entries.map(function(d) {return d.value;}));

最后，选择所有状态路径并使用比例设置填充:

.selectAll('path').attr('fill', function(d) {return color(d.properties.NAME)})