d3.js：刷子的极限尺寸

即使范围较大，是否有限制刷子尺寸的方法？d3.js：刷子的极限尺寸

我把只有一个可以移动和调整大小的x-scale的画笔放在一起。我希望能够限制用户调整大小的范围（基本上只限于某个特定点）。

在以下示例中，画笔函数在画笔变得大于最大范围的一半时停止更新。但是刷子本身仍然可以延伸。有没有办法来防止这种情况发生？或者有更好的方法来处理这个问题？

非常感谢！

在这里看到这个代码在行动：http://bl.ocks.org/3691274（编辑：这个演示现在工作）

bar = function(range) { 

     var x_range = d3.scale.linear() 
      .domain([0, range.length]) 
      .range([0, width]); 

     svg.selectAll("rect.items").remove(); 

     svg.selectAll("rect.items") 
      .data(range) 
     .enter().append("svg:rect") 
      .attr("class", "items") 
      .attr("x", function(d, i) {return x_range(i);}) 
      .attr("y", 0) 
      .attr("width", width/range.length-2) 
      .attr("height", 100) 
      .attr("fill", function(d) {return d}) 
      .attr("title", function(d) {return d}); 
} 

var start = 21; 
bar(data.slice(0, start), true); 

var control_x_range = d3.scale.linear() 
    .domain([0, data.length]) 
    .range([0, width]); 

controlBar = svg.selectAll("rect.itemsControl") 
    .data(data) 
    .enter().append("svg:rect") 
    .attr("class", "itemsControl") 
    .attr("x", function(d, i) {return control_x_range(i);}) 
    .attr("y", 110) 
    .attr("width", width/data.length-2) 
    .attr("height", 20) 
    .attr("fill", function(d) {return d}); 

svg.append("g") 
    .attr("class", "brush") 
    .call(d3.svg.brush().x(d3.scale.linear().range([0, width])) 
    .extent([0,1*start/data.length]) 
    .on("brush", brush)) 
    .selectAll("rect") 
    .attr("y", 110) 
    .attr("height", 20); 

function brush() { 
    var s = d3.event.target.extent(); 

    if (s[1]-s[0] < 0.5) { 
     var start = Math.round((data.length-1)*s[0]); 
     var end = Math.round((data.length-1)*s[1]); 

     bar(data.slice(start,end)); 
    }; 

}

来源

2012-09-10 raffazizzi

我最终被超过大小时重画刷其最大允许大小解决了这个问题：

function brush() { 
    var s = d3.event.target.extent(); 
    if (s[1]-s[0] < 0.5) { 
     var start = Math.round((data.length-1)*s[0]); 
     var end = Math.round((data.length-1)*s[1]); 

     bar(data.slice(start,end)); 
    } 
    else {d3.event.target.extent([s[0],s[0]+0.5]); d3.event.target(d3.select(this));} 
}

演示：http://bl.ocks.org/3691274

我仍然有兴趣阅读更好的解决方案。

来源

2012-09-17 08:53:51 raffazizzi

不错的一段代码，但我发现了一个小错误。它会锁定你的画笔，只要s[1]-s[0] < 0.5，但如果你保持按下调整大小，并使所有的画笔反方向，它开始“移动”画笔没有任何动作（即它不像它应该那样）。

我很确定我能想出一个合理的解决方案。如果是这样，我会在这里重新发布它。

（遗憾的是，在这里作为回答发布，但由于您已经回答过一次，我不能作为评论发布）。

来源

2013-05-29 21:55:49 dmartinez

这里的另一种策略，利用d3.v4和ES6的辩论，因为这就是我现在使用...

brush.on('end',() => { if (d3.event.selection[1] - d3.event.selection[0] > maxSelectionSize) { // selection is too large; animate back down to a more reasonable size let brushCenter = d3.event.selection[0] + 0.5 * (d3.event.selection[1] - d3.event.selection[0]); brushSel.transition() .duration(400) .call(brush.move, [ brushCenter - 0.49 * maxSelectionSize, brushCenter + 0.49 * maxSelectionSize ]); } else { // valid selection, do stuff } });

如果刷的选择大小时，使用者放开过大它将动画降回到指定的最大尺寸（maxSelectionSize）。此时，'end'事件将再次触发，并具有可接受的选择大小。

注0.49标 - 这是为了防止浮点/舍入误差，可能导致无限循环，如果刷move() d的大小是仍然太大。

来源

2016-08-03 07:07:54 ericsoco

d3.js：刷子的极限尺寸

回答

相关问题