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

Question

我试图通过创建一个基于房屋地址是否以'街道'，'道路'结尾的房价条形图来与d3握手， 'Way'等。

但是，我还想根据当地社区的一列数据更改数据视图。

这是关于此主题的第二个查询。下面是前面的查询 - How to extract nominal labels for d3 chart

你可以看到通过熊猫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 noob非常新颖。

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 
    }); 
    }); 

现在我们如何更新不同的select？那简直就是：

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。