禁用笔刷大小调整(DC.js,D3.js)

6

需要更改画刷范围,只能通过下拉菜单进行更改,如此处所示:https://jsfiddle.net/dani2011/67jopfj8/3/

需要禁用的画刷扩展方式:

1) 使用画刷的手柄/调整区域来扩展现有画刷

灰色圆圈是手柄:

enter image description here

2) 点击画刷背景拖动一个新的画刷,其中会出现十字线光标。

JavaScript 文件

已删除画刷的手柄:

timeSlider.on('preRedraw',function (chart)
    {
        var timesliderSVG = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").selectAll("g.resize").selectAll("*").data(data[0]).exit().remove();})

如果使用CSS,可以这样实现:
#bitrate-timeSlider-chart g.resize {
           display:none;
           visibility:hidden;

现在它看起来像这样:

enter image description here.

“resize e”和“resize w”内的rect和path元素已被删除:

enter image description here

然而,“resize e”和“resize w”以扩展笔刷仍然存在:

enter image description here

g.resize.e和g.resize.w的尺寸为0*0:

enter image description here

此外,在Chrome的“开发者工具/元素”中删除“resize e”和“resize w”后,移动画笔后它们会重新出现。
尝试在brushstart、brush、brushend中删除resize-area:
timeSlider.on('renderlet', function (chart) {
var brushg = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush");
var resizeg = brushg.selectAll("g.resize").selectAll("*").data(data[0]);       
var timesliderSVG4 = 
brushg.on("brushstart", function () {resizeg.exit().remove()}).on("brush", function () { resizeg.exit().remove() }).on("brushend", function () {resizeg.exit().remove() })

dc.js文件

尝试更改setHandlePathsresizeHandlePath

1) 注释了_chart.setHandlePaths(gBrush):

_chart.renderBrush = function (g) {....
 //   _chart.setHandlePaths(gBrush);
 ...}

2) 比如通过移除 gbrush.path,更改了 _chart.setHandlePaths = function (gBrush)。

  //  gBrush.selectAll('.resize path').exit().remove();

3) 标记/更改_chart.resizeHandlePath函数如下:

function(d) {...}

d3.js文件

1) 标记/更改resize如下:

mode: "move" //mode: "resize"

var resize = g.selectAll(".resize").data(resizes[0], d3_identity); 

使用resizes[0]可以禁用画笔在背景上的渲染,但仍然可以重新扩展现有的画笔。
2) 标记/更改了d3_svg_brushResizes
3) 在d3.svg.brush = function()中:
a) 添加了.style("display","none"):
background.enter().append("rect").attr("class", "background").style("visibility", "hidden").style("display", "none").style("cursor", "none");
b) background.exit().remove();现在游标变成了“指针”,而不是将画笔扩展到全宽的"haircross"。 c) 禁用d3_svg_brushCursor会使整个画笔消失。 4) 根据https://developer.mozilla.org/en/docs/Web/CSS/pointer-events修改了pointer-events5) 在不同的位置使用console.log来跟踪不同的画笔事件。
function d3_event_dragSuppress(node) {        
        console.log("here2 ");          
    }
    if (d3_event_dragSelect) {
        console.log("here3 d3_event_dragSelect");
        ...
    }
    return function (suppressClick) {
        console.log("suppressClick1");
        ...
            var off = function () {
                console.log("suppressClick2");
               ...
            w.on(click, function () {
                console.log("suppressClick3")
               ...    
    function d3_mousePoint(container, e) {
    console.log("d3_mousePoint1")
    ...
    if (svg.createSVGPoint) {
        console.log("createSVGPoint");
       ...
            if (window.scrollX || window.scrollY) {
                console.log("createSVGPoint1");
                svg = d3.select("body").append("svg").style({
                    ...

    function dragstart(id, position, subject, move, end) {
        console.log("dragstart")
       ...
            function moved() {
                console.log("moved ");

             console.log("transition1");
...
          if (d3.event.changedTouches) {
            console.log("brushstart1");
           ...
        } else {
            console.log("brushstart2");
           ..
        if (dragging) {
            console.log("dragging4");
           ....
            if (d3.event.keyCode == 32) {
                if (!dragging) {
                    console.log("notdragging1");
                    ...
        function brushmove() {
            console.log("brushmove");
            ...
            if (!dragging) {
                console.log("brushmove!dragging");
                if (d3.event.altKey) {
                    console.log("brushmove!dragging1");
                    ...
            if (resizingX && move1(point, x, 0)) {
                console.log("resizeXMove1");
              ...

            if (resizingY && move1(point, y, 1)) {
                console.log("resizeYMove1");
               ...
            if (moved) {
                console.log("moved");
                ...
        }
        function move1(point, scale, i) {
            if (dragging) {
                console.log("dragging1");
                ...
            if (dragging) {
                console.log("dragging2");
            ...
            } else {
                console.log("dragging10");
                ...
            if (extent[0] != min || extent[1] != max) {
                console.log("dragging11");
                if (i) console.log("dragging12"); yExtentDomain = null;    
                console.log("dragging13");            
        function brushend() {
            console.log("brushend");
        ...
似乎最接近所需结果的两个更改在d3.js中: 1) 使用resizes[0]可以禁用背景上的刷子渲染,但仍然可以重新扩展现有的刷子。
var resize = g.selectAll(".resize").data(resizes[0], d3_identity); 

2) 去掉画笔的背景会将光标从“十字架”变成“指针”,只有在点击图表时才会将画笔扩展到全宽度。

`background.exit().remove();`

任何帮助都将非常感激!

你看过"禁用d3刷子调整大小"吗?一定要不仅阅读被接受的答案,还要在大多数其他答案中寻找有价值的信息。 - altocumulus
1
要控制背景点击,请查看Mike Bostock的Click-to-Recenter Brush。除了居中,您也可以取消事件。 - altocumulus
感谢您的参考。在.on(renderlet或.on('preRedraw'内部的“单击重新居中刷”的代码并没有改变结果。我也试图使用d3.event.stopPropagation()来取消事件。此外,“禁用d3画刷调整大小”链接中的建议并没有禁用画笔上的调整大小选项。我将使用这些示例中的相关代码更新我的演示文稿中的代码。 - Dani
2个回答

1
这是来自禁用d3 brush大小调整的被接受答案,由@altocumulus建议。我没有看到@Dani对这个特定想法的回应,但认为我可以尝试一下,因为我曾经看到其他人尝试过。(可能在dc.js用户组上。)
它看起来有点不稳定,因为d3.js会在新的范围绘制刷子,然后片刻之后,我们将范围重置为我们想要的值,但从功能上看似乎做到了我们想要的。
在dc.js中,处理刷子“圆角”的函数是coordinateGridMixin.extendBrush:
_chart.extendBrush = function () {
    var extent = _brush.extent();
    if (_chart.round()) {
        extent[0] = extent.map(_chart.round())[0];
        extent[1] = extent.map(_chart.round())[1];

        _g.select('.brush')
            .call(_brush.extent(extent));
    }
    return extent;
};

请注意,它遵循Lars的答案相同的模式。好吧,这有点像四舍五入,对吧?让我们覆盖它。
首先,让我们在通过下拉列表设置当前小时数时存储它:
var graphSpan;
function addHours(amountHours) {
  graphSpan = amountHours;
  // ...

接下来,让我们覆盖 coordinateGridMixin.extendBrush 方法:
timeSlider.extendBrush = function() {
    var extent = timeSlider.brush().extent();
    if(graphSpan) {
        extent[1] = moment(extent[0]).add(graphSpan, 'hours');
    }
    return extent;
}

我们只是替换了这个函数。如果我们需要在我们的函数中重用旧的实现,我们可以使用dc.override
如果设置了graphSpan,我们会将该数值添加到开始位置来获取结束位置。如果没有设置,则允许用户指定刷子宽度 - 如果您想要该部分自动工作,您需要默认graphSpan和选择小部件。
好吧,让我们承认吧:它非常容易出问题,但它可以用:

twitchy fixed brush extent

编辑:去掉了 twitch!问题在于 dc.js 在一段时间后(响应过滤事件)异步设置刷子范围。如果我们在 extentBrush 中也设置它,那么它就不会显示错误的范围:

timeSlider.extendBrush = function() {
    var extent = timeSlider.brush().extent();
    if(graphSpan) {
      extent[1] = moment(extent[0]).add(graphSpan, 'hours');
      timeSlider.brush().extent(extent);
    }
    return extent;
}

nicer brush resize

https://jsfiddle.net/gordonwoodhull/xdo05chk/1/


非常感谢您的时间、清晰的解释和工作,Gordon!我真的很感激您在解决这个问题上的帮助!Dani - Dani
当然可以,Dani!这些天我感到值得花费心力去弄清楚并撰写常见问题的规范答案。而 Stack Overflow 的作用是放大这些答案的力量——我看到重复的问题越来越少。 - Gordon
关于解决方案还有一个问题:当我拖动线图时,时间图表上的刷子大小仍然会改变。尝试通过在bitChart2.on('postRedraw'中应用timeSlider.extendBrush来更改此设置,使用和不使用dc.renderall()。还尝试在其他事件(如bitChart2.on('renderlet')中实现相同的代码。此外,尝试在bitchart2.on('postRedraw'内覆盖_chart.redrawBrush。任何帮助将不胜感激。 - Dani
mouseZoomable(false) 禁用用户对线图的平移、表格数据的更新和刷子大小的调整。尝试在焦点图的事件中影响范围图的刷子。现在正在研究平移但不缩放,并通过焦点图禁用范围图的刷子更改。谢谢 (: - Dani
我无法在注释中理解这个问题。请开一个新的问题,清晰地说明所需的效果。谢谢! - Gordon
显示剩余3条评论

0

适用于我的解决方法:

在d3中:

禁用调整大小手柄 d3.selectAll('.brush>.handle').remove();

禁用十字线 d3.selectAll('.brush>.overlay').remove();

或者 在css中:

禁用调整大小手柄 -

.handle {
    pointer-events: none;
}

禁用十字线 -

.overlay {
    pointer-events: none;
}

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接