如何为 d3 图表提取名义标签

Posted 2023-03-12

【中文标题】如何为 d3 图表提取名义标签

【英文标题】：How to extract nominal labels for d3 chart

【发布时间】：2015-11-08 03:14:35

【问题描述】：

我正在努力适应在 d3 中访问和操作数据对象。

基本上，我正在尝试根据其地址是否位于Way、Close、Street、Avenue 中来创建反映房产平均价格的条形图。

我在 Python 中使用 Pandas 处理数据，然后将数据导出为三列 district、street_split 和 value。

区域列将用作在相邻补丁中相同街道名称的值之间交换的键。

Here's 用于代码和 json 的 Plunk

我使用嵌套在district 和street_split 上键入数据，因此：

var nested_data = d3.nest()
                                .key( function(d)
                                    return d['district'])
                                .key(function(d)  return d.street_split; )                                
                                .entries(data);

虽然我可以使用以下代码访问下拉选择框的第一级键：

options.text(function (d)  return d.key; )
                    .attr("value", function (d)  return d.key; );

我不知道如何访问street_split 级别。

我能从 Google 找到的最好的功能是范围函数，但它只返回限制（应该如此）。

// Find range of street_name column
          var street_extent = d3.extent(data, function(d) 
              return d['street_split'];
          );

我正在寻求建议或资源来掌握 d3 中的此查询基本数据操作。

如果有帮助，我发现 this 对于理解 d3.nest 非常有用。

【参考方案1】：

我这样做的方法是根据原始的非嵌套数据创建一组 street_extent 列的每个值，如下所示：

var street_extent = d3.set();

data.forEach(function(d) 
                    street_extent.add(d['street_split']);

                );

然后创建一个包含这些标签的变量：

var street_labels = street_extent.values();

然后使用 rangeRoundBands 方法将其插入音阶

var street_scale = d3.scale.ordinal()
            .rangeRoundBands([0+margin, width], .1)
            .domain(street_labels);