d3.js - 禁用画笔调整大小(DC.js、D3.js)

Question

需要更改刷机范围只有从此处显示的下拉列表中:https://jsfiddle.net/dani2011/67jopfj8/3/

需要通过以下方式禁用画笔扩展:

1) 使用画笔的 handle /调整大小区域扩展现有画笔

灰色圆圈是 Handlebars :



2) 通过单击画笔背景拖动一个新画笔，其中
出现十字光标。

JavaScript 文件

删除了刷子的 handle :

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","re​​size w"中的 rect 和 path 元素被删除:



但是，用于扩展画笔的“resize e”、“resize w”仍然存在:



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



此外，在 Chrome 中删除“开发人员工具/元素”中的“调整大小 e”、“调整大小 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 , 调整大小句柄路径 :

1)
备注_chart。 setHandlePaths (gBrush):

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

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

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

3) 备注/更改_chart。 调整大小句柄路径 = 函数 (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();光标现在是“指针”而不是“haircross”，将画笔扩展到全宽

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

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

任何帮助将不胜感激!

Answer 1

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

它看起来有点抽搐，因为 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如果您希望该部分自动工作，则选择小部件。

好吧，让我们承认吧:它是 非常抽搐，但它的工作原理:



编辑:摆脱了抽搐!问题是 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/