d3 v4:合并输入并更新选择以删除重复的代码

时间:2018-01-10 00:24:52

标签: javascript d3.js dry

我了解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用于删除此重复的代码?

完整示例如下:http://plnkr.co/edit/VE0CtevC3XSCpeLtJmxq?p=preview

1 个答案:

答案 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