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

我试图通过根据房屋地址是否以“街道”，“道路”，“道路”等结尾的价格创建条形图来掌握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 noob还是陌生的。

最佳答案

最后考虑一下您想要的数据结构。由于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。

关于javascript - 如何使用d3过滤器和更新功能在数据选择之间切换，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32026598/