title: Disable brush resize (DC.js, D3.js)
body: <p>Brush extent needs to be changed <strong>only</strong> from a dropdown as shown here: <a href="https://jsfiddle.net/dani2011/67jopfj8/3/" rel="nofollow noreferrer">https://jsfiddle.net/dani2011/67jopfj8/3/</a></p>
  
  <p><strong>Need to disable brush extending by:</strong> </p>
  
  <p><strong>1) Extending an existing brush using the handles/resize-area of the brush</strong></p>
  
  <p>Gray circles are the handels:</p>
  
  <p><a href="https://i.stack.imgur.com/4MN6C.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4MN6C.png" alt="enter image description here"></a></p>
  
  <p><strong>2) Dragging a new brush by clicking on the brush background, where the 
      haircross cursor appears.</strong></p>
  
  <p><strong>JavaScript file</strong> </p>
  
  <p>Removed the handles of the brush:</p>
  
  <pre><code>timeSlider.on('preRedraw',function (chart)
      {
          var timesliderSVG = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").selectAll("g.resize").selectAll("*").data(data[0]).exit().remove();})
  </code></pre>
  
  <p>If using css instead:</p>
  
  <pre><code>#bitrate-timeSlider-chart g.resize {
             display:none;
             visibility:hidden;
  </code></pre>
  
  <p>Now it looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/t2ews.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/t2ews.png" alt="enter image description here"></a>.</p>
  
  <p>The rect and the path elements inside "resize e","resize w" were removed:</p>
  
  <p><a href="https://i.stack.imgur.com/g8Y1X.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/g8Y1X.png" alt="enter image description here"></a></p>
  
  <p>However,the "resize e", "resize w" for extanding the brush still exist: </p>
  
  <p><a href="https://i.stack.imgur.com/XT3Cc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XT3Cc.png" alt="enter image description here"></a></p>
  
  <p>g.resize.e and g.resize.w dimesions are 0*0:</p>
  
  <p><a href="https://i.stack.imgur.com/rXNpU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rXNpU.png" alt="enter image description here"></a></p>
  
  <p>Furthurmore,after deleting "resize e","resize w" in the "developer tools/elements" in chrome,they reappear after moving the brush.</p>
  
  <p>Tried to remove the resize-area in brushstart,brush,brushend:</p>
  
  <pre><code>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() })
  </code></pre>
  
  <p><strong>dc.js file</strong> </p>
  
  <p>Tried to change <strong>setHandlePaths</strong>,<strong>resizeHandlePath</strong>:</p>
  
  <p><strong>1)</strong> 
  Remarked the  _chart.<strong>setHandlePaths</strong>(gBrush):</p>
  
  <pre><code>_chart.renderBrush = function (g) {....
   //   _chart.setHandlePaths(gBrush);
   ...}
  </code></pre>
  
  <p><strong>2)</strong> Changed  _chart.<strong>setHandlePaths</strong> = function (gBrush) for example by removing the <strong>gbrush.path</strong>:</p>
  
  <pre><code>  //  gBrush.selectAll('.resize path').exit().remove();
  </code></pre>
  
  <p><strong>3)</strong> Remarked/changed  _chart.<strong>resizeHandlePath</strong> = function (d) {...}.</p>
  
  <p><strong>d3.js file</strong></p>
  
  <p><strong>1)</strong> Remarked/changed <strong>resize</strong> such as:</p>
  
  <p><code>mode: "move" //mode: "resize"</code>  ,</p>
  
  <pre><code>var resize = g.selectAll(".resize").data(resizes[0], d3_identity); 
  </code></pre>
  
  <p>Using resizes[0] disable the brush rendering on the background but still can re-extend the existing brush</p>
  
  <p><strong>2)</strong> Remarked/changed <strong>d3_svg_brushResizes</strong></p>
  
  <p><strong>3)</strong> In d3.svg.brush = function():</p>
  
  <p><strong>a)</strong> Added .style("display","none"):</p>
  
  <pre><code>background.enter().append("rect").attr("class", "background").style("visibility", "hidden").style("display", "none").style("cursor", "none");
  </code></pre>
  
  <p><strong>b)</strong> <code>background.exit().remove();</code>
  The cursor now is "pointer" instead of "haircross" extending the brush to a full width</p>
  
  <p><strong>c)</strong>  <strong>d3_svg_brushCursor</strong> disabled makes the whole brush disappear</p>
  
  <p><strong>4)</strong> Changed the <strong>pointer-events</strong> as specified here: <a href="https://developer.mozilla.org/en/docs/Web/CSS/pointer-events" rel="nofollow noreferrer">https://developer.mozilla.org/en/docs/Web/CSS/pointer-events</a></p>
  
  <p><strong>5)</strong> console.log in different places to track the different brush events:</p>
  
  <pre><code>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 &amp;&amp; move1(point, x, 0)) {
                  console.log("resizeXMove1");
                ...
  
              if (resizingY &amp;&amp; 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");
          ...
  </code></pre>
  
  <p><strong>The two changes that seemed to get closest to the needed result are in d3.js:</strong></p>
  
  <p><strong>1)</strong> Using <strong>resizes[0]</strong> disables the brush rendering on the background but still can re-extend the existing brush</p>
  
  <pre><code>var resize = g.selectAll(".resize").data(resizes[0], d3_identity); 
  </code></pre>
  
  <p><strong>2)</strong> <strong>Removing the brush's background</strong> changes the cursor to "pointer" instead of "haircross",extending the brush to a full width only when clicking on the graph</p>
  
  <pre><code>`background.exit().remove();`
  </code></pre>
  
  <p>Any help would be very appreciated!</p>