如何使用 d3 过滤器和更新功能在数据选择之间切换

Question

我试图通过根据房产地址是否以“街道”、“道路”、“路”等结尾来创建房价条形图来掌握 d3。

但是，我还希望根据本地社区的一列数据更改数据视图。

这是关于这个主题的第二个查询。这是上一个查询 - How to extract nominal labels for d3 chart

您可以在此处查看通过 Pandas 的 to_json 函数提取的数据的结构：http://plnkr.co/edit/He3yPUfuE8k7hvIkupjS?p=preview

我使用了嵌套函数来键入本地区域的数据，但不知道如何插入 d3.filter 方法来将数据限制到选定区域。

我有一个基于按键创建选择按钮的函数：

var options = dropDown.selectAll("option")
           .data(nested_data)

         .enter()
           .append("option");


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

但我无法解决的是如何将此选择中的值插入 d3 脚本的绘图部分。

d3.select("svg")
            .selectAll("circle")
            .data(nested_data)
            .enter()
            .append("circle")


          d3.selectAll("circle")            
            .attr("cx", function(d) {
                console.log(d["street_name"]);
                return street_scale(d["street_name"]);
            })
            .attr("cy", function(d) {
                return price_scale(d["value"]);
            })
            .attr("r", 5)
            .attr("fill", "steelblue");

虽然我知道我需要一个更新功能来继续在用户选择时更改图表，但我还没有找到可以适应的示例。

提前感谢您的耐心等待 - 我对 d3 和 Javascript 菜鸟非常陌生。

Answer 1

想想你最终想要的数据结构。由于d3 喜欢对象数组，并且您想按地区过滤，所以我在想象这个：

var data = {
  district1: [
    {
      street_split: 'a',
      value: 1
    },{
      street_split: 'b',
      value: 2
    }
 ],
 district2: [
    {
      street_split: 'a',
      value: 1
    },{
      street_split: 'b',
      value: 2
    }
 ],
 etc...

然后你的过滤器就变成了：

data[someDistrict]

那么，我们如何以这种格式获取您的数据。我会在一个循环中完成所有事情，数据、范围、标签等......：

  var orgData = {}, // our final data like above
      street_labels = d3.set(), // set of streets
      districts = d3.set(), // set of districts
      minVal = 1e99, // min of values
      maxVal = -1e99; //max of values
  data.forEach(function(d){
    d.value = +d.value; // convert to numeric
    street_labels.add(d.street_split); // set of street_labels
    districts.add(d.district); // set of districts
    if (d.value < minVal) minVal = d.value; // new min?
    if (d.value > maxVal) maxVal = d.value; //new max?
    if (!orgData[d.district]){ // we want a associate array with keys of districts
      orgData[d.district] = []; // and values that are arrays of object
    }
    orgData[d.district].push({ // those objects are street_split and value
      street_split: d.street_split,
      value: d.value
    });
  });

现在我们如何更新不同的选择？就变成了：

dropDown.on("change", function() {
    d3.selectAll("circle")
      .data(orgData[this.value]) // new data
      .attr("cx", function(d) { // update attributes
        return street_scale(d.street_split);
      })
      .attr("cy", function(d) {
        return price_scale(d.value);
      });
  });

这是我的working code。