Deshabilitar el cambio de tamaño del pincel (DC.js, D3.js)
La extensión del pincel debe cambiarsesolamente desde un menú desplegable como se muestra aquí:https://jsfiddle.net/dani2011/67jopfj8/3/
Necesita deshabilitar la extensión del cepillo:
1) Extender un pincel existente usando los mangos / área de cambio de tamaño del pincel
Los círculos grises son las manos:
2) Arrastrando un nuevo pincel haciendo clic en el fondo del pincel, donde aparece el cursor de cruz.
Archivo JavaScript
Se quitaron los mangos del pincel:
timeSlider.on('preRedraw',function (chart)
{
var timesliderSVG = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").selectAll("g.resize").selectAll("*").data(data[0]).exit().remove();})
Si usa css en su lugar:
#bitrate-timeSlider-chart g.resize {
display:none;
visibility:hidden;
Ahora se ve así:
Se eliminaron los elementos rect y path dentro de "resize e", "resize w":
Sin embargo, el "redimensionar e", "redimensionar w" para extender el pincel todavía existe:
Las dimensiones de g.resize.e y g.resize.w son 0 * 0:
Además, después de eliminar "cambiar tamaño e", "cambiar tamaño w" en las "herramientas / elementos de desarrollador" en Chrome, reaparecen después de mover el pincel.
Intenté eliminar el área de cambio de tamaño en brushstart, brush, brushhend:
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() })
archivo dc.js
Intenté cambiarsetHandlePaths,resizeHandlePath:
1) Remarcó el _chart.setHandlePaths(gBrush):
_chart.renderBrush = function (g) {....
// _chart.setHandlePaths(gBrush);
...}
2) Cambió _chart.setHandlePaths = función (gBrush) por ejemplo eliminando elgbrush.path:
// gBrush.selectAll('.resize path').exit().remove();
3) Comentario / cambiado _chart.resizeHandlePath = función (d) {...}.
archivo d3.js
1) Observado / cambiadoredimensionar como:
mode: "move" //mode: "resize" ,
var resize = g.selectAll(".resize").data(resizes[0], d3_identity);
El uso de redimensionar [0] deshabilita la representación del pincel en el fondo pero aún puede volver a extender el pincel existente
2) Observado / cambiadod3_svg_brushResizes
3) En d3.svg.brush = function ():
una) Se agregó .style ("display", "none"):
background.enter().append("rect").attr("class", "background").style("visibility", "hidden").style("display", "none").style("cursor", "none");
si) background.exit().remove(); El cursor ahora es "puntero" en lugar de "mechón de pelo" extendiendo el pincel a un ancho completo
C) d3_svg_brushCursor deshabilitado hace que todo el pincel desaparezca
4) Cambiado eleventos de puntero como se especifica aquí:https://developer.mozilla.org/en/docs/Web/CSS/pointer-events
5) console.log en diferentes lugares para rastrear los diferentes eventos de pincel:
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");
...
Los dos cambios que parecían acercarse más al resultado necesario están en d3.js:
1) Utilizandocambia el tamaño [0] desactiva la representación del pincel en el fondo pero aún puede volver a extender el pincel existente
var resize = g.selectAll(".resize").data(resizes[0], d3_identity);
2) Eliminar el fondo del pincel cambia el cursor a "puntero" en lugar de "mechón de pelo", extendiendo el pincel a un ancho completo solo al hacer clic en el gráfico
`background.exit().remove();`
¡Cualquier ayuda será muy apreciada!