【问题标题】:d3 brush not resetting when removedd3刷子移除后不重置
【发布时间】:2017-10-12 21:00:47
【问题描述】:

这里缺少什么,因为当画笔被移除时(你点击画笔而不是拖动)?活动选择不会重置(即画笔不会被移除)。

任何想法如何解决这个问题?

干杯!

// Handles a brush event, toggling the display of foreground lines.
function brush_parallel_chart() {    
    for(var i=0;i<dimensions.length;++i){
        if(d3.event.target==y[dimensions[i]].brush) {
            extents[i]=d3.event.selection.map(y[dimensions[i]].invert,y[dimensions[i]]);
        }
    }

    foreground.style("display", function(d) {
        return dimensions.every(function(p, i) {
            if(extents[i][0]==0 && extents[i][0]==0) {
                return true;
            }
            return extents[i][1] <= d[p] && d[p] <= extents[i][0];
        }) ? null : "none";
    });
}

http://plnkr.co/edit/RkWBgQ6oi584H3212WrM?p=preview

当我们在开始时完全清除画笔时会发生这种情况:

【问题讨论】:

    标签: javascript angularjs d3.js


    【解决方案1】:

    我分叉了你的代码。看看这个 - http://plnkr.co/edit/oYhx6DSjQHI3E3nmE97h?p=preview 这是你需要的行为吗?

    g.append("g")
      .attr("class", "brush")
      .each(function(d) {
        d3.select(this).call(y[d].brush = d3.brushY().extent([[-8, 0], [8,height]])
        .on("start", brushstart) // <-- !!
        .on("brush", gobrush)
        .on("brush", brush_parallel_chart));
      })
      .selectAll("rect")
      .attr("x", -8)
      .attr("width", 16);
    

    我将你的 brushstart 函数重命名为 gobrush。并创建了新的brushstart 函数。我在选择开始事件上附加了新的brushstart 函数。在这个函数中,我设置了适当的样式,这会重置选择。

    function brushstart(selectionName) {
      foreground.style("display", "none")
    
      var dimensionsIndex = dimensions.indexOf(selectionName);
    
      extents[dimensionsIndex] = [0, 0];
    
      foreground.style("display", function(d) {
        return dimensions.every(function(p, i) {
            if(extents[i][0]==0 && extents[i][0]==0) {
                return true;
            }
          return extents[i][1] <= d[p] && d[p] <= extents[i][0];
        }) ? null : "none";
      });
    }
    

    【讨论】:

    • 但是所有画笔选择都会被重置。如果我应用了两个画笔但只删除了一个,过滤仍然应该考虑剩下的另一个。请看我刚刚发布的图像。
    • @konrad 哦,我没注意是可以的,同时设置两个或多个选择。我更新了答案,看看plnkr上的新链接。
    猜你喜欢
    • 1970-01-01
    • 2014-07-10
    • 2017-07-24
    • 1970-01-01
    • 2013-04-22
    • 1970-01-01
    • 2015-02-09
    • 1970-01-01
    • 2017-04-20
    相关资源
    最近更新 更多