Question

是否可以使用静态宽度的画笔，即不可调整大小的画笔？它仍然需要拖延。似乎没有任何迹象表明它是否可以在文档中使用。

Answer 1

没有明确的选项，但您需要做的就是在刷子事件处理程序中重置域，例如

var brush = d3.svg.brush().on("brush", brushed);

function brushed() {
  brush.extent(desiredDomain);
}

Answer 2

通过css

隐藏调整大小手柄可以防止调整大小

g.brush>.resize {
    display: none;
}

Answer 3

在D3.js v4.0中，您可以在CSS中为SVG元素（句柄矩形）禁用指针事件。

＆＃13;

.handle {
  pointer-events: none;
}

＆＃13;

Answer 4

实际上，手动重置范围似乎效果不佳。

我发现的解决方案隐藏在滑块示例中，它完全删除了resize元素：

// Create the brush normally.
var brush = d3.svg.brush()
    .x(xScale)
    .on("brush", brushed);

// Add it to a SVG group
var slider = context.append("g")
    .attr("class", "x brush")
    .call(brush);

// Remove the resize control
slider.selectAll(".resize").remove();

Answer 5

我遇到了完全相同的问题。我使用的是D3 4.0，需要沿x轴实现固定尺寸的画笔。我在drag.filter()中使用.brush函数和修改过的元素来实现此目的：

var brush = d3.brushX()
            .filter(function () {return d3.mouse(this)[0] > brushStart && d3.mouse(this)[0] < brushStart + brushWidth})
            .extent([[0, 0], [width, height]])
            .on("end", brushended)
            .on('brush', beingBrushed);
svg.append('g')
    .attr('class', 'brush')
    .call(brush)
    .call(brush.move, [0, brushWidth]); //initial position
d3.selectAll('.brush>.handle').remove();

function brushended() {
    var s = d3.event.selection;
    if (s!== null) {
        brushStart = s[0];
    }
}

这样刷子允许拖动但不会调整大小。

Answer 6

我刚刚用画笔从图形中删除了.handle个元素：

contextGraph.selectAll('.handle').remove();

禁用d3画笔调整大小

6 个答案: