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

Question

我试图根据特性地址是否以“Street”、“Road”、“Way”等结尾来创建房价条形图，从而掌握 d3。

但是，我还希望数据 View 能够根据本地社区的数据列进行更改。

这是关于此主题的第二个查询。这是上一个查询 - 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 。