禁用画笔调整大小（DC.js、D3.js）

Question

画笔范围需要从下拉列表中更改仅，如下所示：https://jsfiddle.net/dani2011/67jopfj8/3/

需要禁用笔刷扩展:

1) 使用画笔

的handles/resize-area扩展现有画笔

灰色圆圈是交易商：

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;

现在看起来像这样：

.

删除了 "resize e"、"resize w" 中的 rect 和 path 元素：

但是，扩展笔刷的"resize e"、"resize w"仍然存在：

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

此外，删除chrome中"developer tools/elements"中的"resize e"、"resize w"后，移动笔刷后又会出现

试图删除 brushstart,brush,brushend 中的调整区域：

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 文件

试图改变 setHandlePaths,resizeHandlePath:

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

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

2) 更改了 _chart.setHandlePaths = 函数 (gBrush) 例如通过删除 gbrush.path:

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

3) Remarked/changed _chart.resizeHandlePath = function (d) {...}.

d3.js 文件

1) Remarked/changed resize 如：

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

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

使用调整大小[0] 禁用背景上的画笔渲染但仍然可以重新扩展现有画笔

2) Remarked/changed 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(); 光标现在是 "pointer" 而不是 "haircross" 将画笔扩展到全宽

c) d3_svg_brushCursor禁用使整个笔刷消失

4) 更改了此处指定的 pointer-events：https://developer.mozilla.org/en/docs/Web/CSS/pointer-events

5) 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) 删除画笔的背景 将光标更改为 "pointer" 而不是 "haircross"，扩展仅在单击图表时刷到全宽

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

如有任何帮助，我们将不胜感激！

Answer 1

这是来自 Disable d3 brush resize, as suggested by @altocumulus. I didn't see a response from @Dani on this idea in particular, but thought I'd go ahead and try it, since I've seen other people try it in the past. (Probably on the dc.js users group 中已接受的答案。）

看起来有点紧张，因为d3.js会在新的范围内绘制画笔，片刻之后我们将范围重置为我们想要的，但从功能上看它似乎做了我们想要的。

在dc.js中处理画笔"rounding"的函数是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 和 select 小部件自动工作，则需要默认设置。

好吧，让我们承认吧：它非常紧张，但它有效：

编辑：摆脱抽搐！问题是 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;
}

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

Answer 2

对我有用的：

在 d3 中：

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

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

或在 css:

禁用调整大小手柄 -

.handle {
    pointer-events: none;
}

禁用十字线 -

.overlay {
    pointer-events: none;
}

禁用画笔调整大小（DC.js、D3.js）

Disable brush resize (DC.js, D3.js)

d3.js

dc.js