javascript - D3 - 根据数据键更新图表

Question

我是 D3 新手，我想在一些散点图上训练自己(基于《纽约时报》的散点图: Student debt 。

我成功地重新创建了一个像这样的图表:Oklahoma Colleges .

现在，我的条目比俄克拉荷马州图表多得多，因此我的图表可读性不太好，我想根据一个按钮过滤数据，通过该按钮我可以选择仅显示“公立”大学或“私有(private)”的。

我已经阅读了许多有关 ENTER-UPDATE-EXIT 方法的教程，但在将其实际应用到我的案例中时仍然遇到一些麻烦。

假设以下 JSON 文件:

[ { "Id": 1, "Name": "College A", "Type": "Public" }, { "Id": 2, "Name": "College B", "Type": "Private" }, { "Id": 3, "Name": "College C", "Type": "Public" }, { "Id": 4, "Name": "College D", "Type": "Public" }, { "Id": 5, "Name": "College E", "Type": "Private" }, { "Id": 6, "Name": "College F", "Type": "Private" }, ]

我想实现以下算法:

button.on("change"){
If value == "public" :
  display data where data.type == "public"
Else
  display data where data.type == "private"
}

我的第一个解决方案是每次按下按钮时使用新数据集创建一个 SVG(并删除以前的 SVG)。但我认为有更好的方法来做到这一点:)

你能帮我吗？ 谢谢!

编辑:遵循@sapote Warriors 的回答 -

这是我加载数据时所做的事情:

d3.json("data.json", function(data) {

  //Coerce string to numbers
  ...
  dataset = data;
  ...
  //Add axis and legend

}

当我单击两个按钮之一时:

function update(input){

var data = [];
for(i in dataset) {
    if(dataset[i]["Type"] == input)
        data.push(dataset[i]);
}
test = data; //Global scope variable, to check if new data is here on the console
circles = svg.selectAll(".circle")
.data(data);
circles.exit().remove();
circles.enter().append("circle")
  .attr("class","circle")
  ...

}

但这并不完美。第一次单击任何按钮时，圆圈都会正确显示，然后当我单击第二个按钮时，圆圈不会全部消失，并且新数据似乎没有正确附加。

嗯，对于进入-更新-退出过程的理解仍然存在一些问题^^

编辑:好的问题解决了!我刚刚在实现输入-更新-退出方法时犯了一些错误。使用减少的数据集来理解问题，现在我的想法很清楚了:)

Answer 1

我想我也许能帮到你。假设您的圆圈已显示在 SVG 上，一种方法是在单击按钮时构建一个新的值数组，其类型为“公共(public)”或“私有(private)”。像这样的事情:

publicButton.on("click", function() { 
newData = [];
for(i in existingDataArray) {
if(existingDataArray[i]["Type"] == "Public")
newData.push(existingDataArray[i]);
}

现在，您可以将这些新数据与您提到的 .data().enter().exit().remove() 方法结合使用，将新数据附加到圆对象中。之后，您可以删除新数据中不存在的圆圈，并保留新数据中的圆圈。然后，如果您愿意，您可以对保留的那些进行一些操作，例如更新其颜色或什么都不做。有点像这样:

var circles = svg.selectAll("circle").data(newData);
circles.exit().remove();
circles.enter().attr("fill", ...);
}

希望这对一些人有帮助，如果您有任何疑问，请告诉我。