Question

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

需要通过以下方式停用画笔延伸：

1）使用画笔的手柄/调整大小区域扩展现有画笔

灰色圆圈是handels：

2）通过单击画笔背景拖动新画笔，其中 haircross光标出现。

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元素被删除了：

然而，“调整大小e”，“调整大小w”以扩展画笔仍然存在：

g.resize.e和g.resize.w dimesions是0 * 0：

此外，在删除“resize e”，“chrome中的”调整大小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档案

尝试更改 setHandlePaths ， resizeHandlePath ：

1）备注_chart。 setHandlePaths （gBrush）：

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

2）更改了_chart。 setHandlePaths = function（gBrush），例如删除 gbrush.path ：

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

3）备注/更改_chart。 resizeHandlePath = function（d）{...}。

d3.js档案

1）备注/更改调整大小，例如：

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(); 光标现在是“指针”而不是“毛发交叉”将画笔扩展到全宽

c） d3_svg_brushCursor 已停用，整个画笔消失

4）更改了此处指定的指针事件：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）使用调整大小[0] 会禁用背景上的画笔渲染，但仍可以重新扩展现有画笔

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

2） 删除画笔的背景将光标更改为“指针”而不是“haircross”，仅在单击图形时将画笔扩展为全宽< / p>

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

非常感谢任何帮助！

Answer 1

这来自Disable d3 brush resize中接受的答案，正如@altocumulus所建议的那样。我没有看到@Dani对此想法的回应，但我想我会继续尝试，因为我已经看过其他人过去尝试过。（可能在dc.js users group上。）

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

在dc.js中处理画笔的功能＆＃34;舍入＆＃34;是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＆＃39;相同的模式。回答。嗯，这有点像四舍五入，对吧？让我们覆盖它。

首先，让我们存储通过下拉列表设置的当前小时数：

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和选择小部件。

好吧，让我们承认：它的非常抽搐，但它确实有效：

https://jsfiddle.net/gordonwoodhull/272xrsat/5/

编辑：摆脱了抽搐！问题是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/272xrsat/9/

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）

2 个答案: