如何为d3图表提取名义标签 [英] How to extract nominal labels for d3 chart

问题描述

我正在努力习惯于访问和处理d3中的数据对象，希望有人能提供帮助.

I'm struggling to get used to accessing and manipulating data objects in d3 and hope someone can help.

本质上，我试图根据其地址是否在Way，Close，Street，Avenue中来创建反映属性平均价格的条形图.

Essentially, I'm trying to create bar chart reflect the average price of a property based on whether its address is in a Way, Close, Street, Avenue.

我已经使用Python中的Pandas修改了数据，然后用district，street_split和value的三列导出了数据.

I've munged the data using Pandas in Python and then exported the data with three columns of district, street_split and value.

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

The district column is to be used as a key to swap between values of the same street names in neighbouring patches.

此处是代码和json的Plunk

Here's the Plunk for the code and json

我已经使用nest来在district上然后在street_split上键入数据，因此:

I've used nest to key the data on district and then on street_split thus:

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

虽然我可以使用代码以及以下行来访问下拉选择器框的第一级键:

While I can access the first level key for a dropDown selector box with code along with the lines of:

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

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

I can't work out how to access the street_split level.

我可以从Google找到的最好的是范围函数，但这只会返回限制(应有的限制).

The best I could find from Google was the extent function, but that only returns the limits (as it should).

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

有人可以向我提供一些帮助或资源来解决d3中的此查询基本数据操作吗?

Can someone provide with me with some help or a resource to get to grips with this query basic data manipulation in d3?

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

If it helps, I found this extremely useful for understanding d3.nest.

推荐答案

我这样做的方法是根据原始的，未嵌套的数据创建street_extent列的每个值的集合，如下所示:

The way I did it was to create a set of every value of the street_extent column based on the original, un-nested data, like this:

var street_extent = d3.set();

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

                });

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

Then created a variable containing those labels:

var street_labels = street_extent.values();

然后使用rangeRoundBands方法将其插入比例尺

And then plugging that into the scale using the rangeRoundBands method

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

这篇关于如何为d3图表提取名义标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！