禁用画笔调整大小(DC.js,D3.js)
刷子范围只需从下拉列表中更改,如下所示:https://jsfiddle.net/dani2011/67jopfj8/3/
需要禁用刷扩展:
1)使用画笔的手柄/调整大小区域扩展现有画笔
汉代的灰色圈子是:
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 dimesions是0*0:
此外,在删除"resize e","在chrome中的"开发者工具/元素"中调整大小"后,它们会在移动画笔后重新出现.
试图删除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 disabled使整个画笔消失
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)使用resizes [0]禁用背景上的画笔渲染,但仍可以重新扩展现有画笔
var resize = g.selectAll(".resize").data(resizes[0], d3_identity);
2) 删除画笔的背景将光标更改为"指针"而不是"haircross",仅在单击图形时将画笔扩展为全宽
`background.exit().remove();`
任何帮助将非常感谢!
这是来自禁用 d3 画笔调整大小中接受的答案，如 @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;
};
请注意，它遵循与拉尔斯的答案相同的模式。嗯，这有点像四舍五入，对吧？让我们覆盖它。
首先，让我们存储通过下拉菜单设置的当前小时数：
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/