D3 - 基于数据的密钥更新图表

我是新来D3，我想自己培养一些散点图（基于一个从纽约时报上：Student debt D3 - 基于数据的密钥更新图表

我设法重建这样一个曲线图之一：Oklahoma Colleges

现在，我比俄克拉荷马图表更加条目，所以我的图表是不是很可读，我想筛选基于一个按钮，我可以选择只显示“公共数据“大学或”私人“

我读过很多关于ENTER-UPDATE-EXIT方法的教程bu我在实际应用于我的案例时仍然遇到一些麻烦。

假设下面的JSON文件：

[{ “ID”：1， “名称”： “大学A”， “类型”： “公共”}，{ “身份证” ：2， “Name”：“College B”， “Type”：“Private”}，{ “Id”：3， “Name”：“College C”， “Type”：“Public”} ，{ “Id”：4， “Name”：“College D”， “Type”：“Public”}，{ “Id”：5， “名称”： “大学E”， “类型”： “私有”}，{ “ID”：6， “名称”： “大学F”， “类型”： “私有”}]

我想实现如下算法：

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

我的第一个解决方案是创建一个SVG每个我按下按钮时（和擦除以前的SVG）与新的数据集。但我认为有更好的办法做到这一点:)

你能帮我吗？谢谢！

编辑：以下@sapote战士的答案 -

这里我做什么，当我加载数据：

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") 
    ... 

}

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

哼哼，仍然有一些问题了解进入更新退出进程^^

编辑：好的问题解决了！我在实施enter-update-exit方法时犯了一些错误。是否用缩减的数据集来理解这个问题，现在在我的脑海里已经很清楚:)

来源

2016-02-26 Bikemat

我想我可以帮你。假设您的圈子已经显示在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", ...); 
}

希望这有助于一些，让我知道如果您有任何问题。

来源

2016-02-26 07:21:51 cbhyphen

嗨！谢谢，我会尽力实现这一点，只要我可以:)让你更新！ – Bikemat

好的，我已经实现了你的代码片段。它不是100％的工作。假设我已将初始数据加载到“数据集”中，但在初始加载时我没有显示任何内容。当我点击按钮“公共”时，一切似乎都很好。但是，当我点击'private'按钮时，以前的节点不会消失，并且不会出现一些新的节点。我已经用结果编辑了我的问题。 – Bikemat

在[link]（https://bost.ocks.org/mike/join/）上阅读Mike Bostock的教程如果新数据集小于旧数据集，则剩余元素将在退出选择中结束并获取除去。如果新数据集较大，则剩余数据将在输入选择中结束，并添加新节点。如果新数据集的大小完全相同，那么所有元素都会更新为新位置，并且不会添加或删除元素。我认为enterData和exitingData是混合的。我是否需要用ID标识每个数据（我已经拥有了，我如何将它指定给d3）？ – Bikemat

D3 - 基于数据的密钥更新图表

回答

相关问题