需要更改画刷范围,只能通过下拉菜单进行更改,如此处所示: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的尺寸为0*0: 此外,在Chrome的“开发者工具/元素”中删除“resize e”和“resize 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) 比如通过移除 gbrush.path,更改了 _chart.setHandlePaths = function (gBrush)。
// gBrush.selectAll('.resize path').exit().remove();
3) 标记/更改_chart.resizeHandlePath函数如下:
function(d) {...}
d3.js文件
1) 标记/更改resize如下:
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修改了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) 去掉画笔的背景会将光标从“十字架”变成“指针”,只有在点击图表时才会将画笔扩展到全宽度。
`background.exit().remove();`
任何帮助都将非常感激!