我了解merge
可以用来组合d3 v4中的输入和更新选择,如下面的简单示例:https://bl.ocks.org/mbostock/3808218。
我有一个散点图,其中多个变量显示在共享的x轴上,适用于由下拉框选择的不同组。选择新组时,将更新整个数据点集,并为每个变量添加点,如下所示:
.each(function(d, i) {
var min = d3.min(d.values, function(d) { return d.value; } );
var max = d3.max(d.values, function(d) { return d.value; } );
// Join new data with old elements
var points = d3.select(this).selectAll("circle")
.data(d.values, function(d) { return (d.Plot); } );
// Add new elements
points.enter().append("circle")
.attr("cy", y(d.key))
.attr("r", 10)
.style("opacity", 0.5)
.style("fill", function(d) { return elevColor(d.Elevation); })
.merge(points) //(?)
.transition()
.attr("cx", function(d) { return x((d.value-min)/(max-min)); });
// Remove old elements not present in new data
points.exit().remove();
这整段代码大部分都是针对整体输入选择而重复的,并且在整体更新选择中(与单个变量相对),这似乎不太理想。如何merge
用于删除此重复的代码?
答案 0 :(得分:2)
我是solution for your past question的作者,您在此处链接了该作者。我在评论中提供了这个解决方案,而不是一个正确的答案,因为我很匆忙,我写了一个懒惰的解决方案,充满了重复 - 正如你在这里说的那样。在I commented同一问题中,减少重复的解决方案是使用public class AccountModel : IAccountModel
{
public AccountModel() { }
[Key]
public string Email { get; set; }
public string Password { get; set; }
public string Username { get; set; }
public string VerifyURL { get; set; }
public bool Verified { get; set; }
public DateTime URLValidSince { get; set; }
[Required]
public virtual UserModel User { get; set; }
}
public class UserModel : IUserModel
{
[Key, ForeignKey("Account")]
public string Username { get; set; }
[Required]
public virtual AccountModel Account { get; set; }
}
public static void main() {
AccountModel acc = new AccountModel(email, password, username);
UserModel user = new UserModel(username);
acc.User = user;
user.Account = acc;
this.DBUtilites.Insert(acc);
}
public T Insert<T>(T t) where T : class {
try
{
using (DBUtilities ctx = new DBUtilities(ConfigurationManager.ConnectionStrings["DBConnectionStr"].ConnectionString))
{
DbSet<T> dbSet = ctx.Set<T>();
dbSet.Add(t);
ctx.SaveChanges();
}
}
catch (Exception ex)
{
Console.WriteLine("Exception Inserting Entity: " + ex);
int exceptionNo = HandleException(ex);
}
return t;
}
。
目前,在您的代码中,有关“更新”和“输入”选项设置的重复:
merge
为避免重复,我们var update = g.selectAll(".datapoints")
.data(filtered[0].values);
var enter = update.enter().append("g")
.attr("class", "datapoints");
update.each(function(d, i){
//code here
});
enter.each(function(d, i){
//same code here
});
选择。这就是你如何做到的:
merge
以下是更新的Plunker:http://plnkr.co/edit/MADPLmfiqpLSj9aGK8SC?p=preview