Disable brush on range chart before selecting a scale from the dropdown/on page load(dc.js,d3.js)

问题

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:

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.

回答1:

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/8yz5s60d/14/

来源：https://stackoverflow.com/questions/41578236/disable-brush-on-range-chart-before-selecting-a-scale-from-the-dropdown-on-page

标签

d3.js

dc.js