2

Following my previous question Disable resize of brush on range chart from focus charts (dc.js, d3.js) - Solved and my previous fiddle,https://jsfiddle.net/dani2011/uzg48yk7/1/, still need to disable brush drawing on the range chart before selecting a scale from the dropdown and/or on page load (!isPostback):

a) When panning /translating the line of the focus charts (bitChart,bitChart2) the brush is displayed on the whole range of the range chart:

enter image description here

b) It is possible to drag the brush on the range chart

Tried to cancel the zoom event using event listeners as followed:

  var anotherRoot = d3.select("div#bitrate-timeSlider-chart.dc-chart").select(".chart-body");

    anotherRoot.on("mousedown", null)
    anotherRoot.on("mousemove.zoom", null)
    anotherRoot.on("dblclick", null)
    anotherRoot.on("touchstart", null)
    anotherRoot.on("wheel", null)
    anotherRoot.on("mousewheel.zoom", null)
    anotherRoot.on("MozMousePixelScroll.zoom", null)

Tried to use different SVG scopes instead of anotherRoot such as:

//option 1
    var rootSvg = d3.select("#bitrate-timeSlider-chart svg brush")
//option 2
            var brushSVG = d3.select("#bitrate-timeSlider-chart").select("g.brush").select("*");
//option 3
    d3.select("#bitrate-timeSlider-chart").on("touchstart.zoom", null);
                    d3.select("#bitrate-timeSlider-chart").on("mouse.zoom", 

null);

Tried to cancel the event listeners:

1) Directly in my js file

2) Within the range chart (timeSlider)

3) Within the range chart events such as .on(render...) , .on(postRedraw...)

4) Tried to remove the brush within .on(postRedraw...) and within (!isPostBack) using:

//JS file
function isPostBack() { //function to check if page is a postback-ed one
    return document.getElementById('_ispostback').value == 'True';
}

//HTML file
....
</script>
    <input type="hidden" id="_ispostback" value="<%=Page.IsPostBack.ToString()%>" />
</body>
</html>


d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").selectAll("*").data(data[0]).exit().remove();

Any help would be appreciated.

Community
  • 1
  • 1
Dani
  • 333
  • 3
  • 20
  • I don't see the brush resizing when panning the focus chart. I do see that it's possible to drag a brush on the range chart before the scale is selected. I already showed how to disable brush resizing on the range chart in http://stackoverflow.com/a/41209581/676195 but that seems to be messed up by one of the other things you've tried here. Could you please remove the things that didn't work? – Gordon Jan 11 '17 at 15:41
  • To put it differently: I see two problems. 1. Possible to brush before scale is selected (so maybe we can figure out how to disable the brush until scale is selected). 2. Possible to zoom the focus chart producing invalid scale. Not sure how to fix these but are we talking about the same thing? – Gordon Jan 11 '17 at 16:33
  • Thank you Gordon for attending to this. Yes, we are talking about the same thing.To be sure updated my question and included a print screen to show problem 2. Looked into the code in fiddle jsfiddle.net/dani2011/uzg48yk7/1 - don't know which code messes up the display on the range chart after scale is selected in the fiddle which I should delete (it displays properly in my local enviroment) – Dani Jan 11 '17 at 18:24
  • The solution in this fiddle is built following another solution you gave at the time https://github.com/dc-js/dc.js/issues/820 which enables both focus charts to move the brush on the range chart without changing the brush's extent after the scale is selected from the dropdown.The two problems which you described exist also in this fiddle jsfiddle.net/gordonwoodhull/272xrsat/9. Disable the brush until the scale is selected sounds good,however not sure how to implement it. Trying to work on display:none of the brush as long as graphSpan does not exist. – Dani Jan 11 '17 at 18:24

1 Answers1

2

Okay, the answer I provided to the previous question for fixing the brush size was broken by these lines: 

document.getElementById("alert").style.display = "inline";

There's no #alert element, so it crashes every time. I've restored that to the way I wrote it and it's a little bit messy when you drag, but at least it locks the brush size.

As for the other parts, now we're (finally) getting into documented behavior. Yay!

It's not perfect, but you can enable the brush only when there is a scale selection. Just disable it at first:

timeSlider
    .brushOn(false)

and then enable it with a render when a scale has been selected:

function addHours(amountHours) {
    var showBrush = +amountHours !== 0;
    if(timeSlider.brushOn() !== showBrush)
        timeSlider.brushOn(showBrush)
            .render();

The render is not great, we'd rather do a redraw, but apparently the chart will only look at .brushOn() on render. Something to look into in the future.

We can also disable the styles which make it look like it has a ordinal brush and wants to be clicked on, like this:

    .dc-chart rect.bar {
      cursor: default;
    }
    .dc-chart rect.bar:hover {
      fill-opacity: 1;
    }

As for preventing zoom on the focus charts, you just need to set .zoomScale():

bitChartGeneral
    .zoomScale([1,1]);

This sets d3.zoom.scaleExtent, locking the zoom.

Here's the updated fiddle: https://jsfiddle.net/gordonwoodhull/dsfqeut8/5/

Gordon
  • 19,811
  • 4
  • 36
  • 74
  • Apologize for omitting the alert thing from the html in the fiddle- thank you for tracking that. Updated the html in https://jsfiddle.net/dani2011/uzg48yk7/1/ with and it solved the strange behavior of the range chart.Thank you so much for the clear,efficient answer and explanations to these problems, It really helps a lot! – Dani Jan 11 '17 at 20:22