d3.js - 从下拉列表/页面加载中选择比例之前禁用范围图表上的画笔(dc.js，d3.js)

Question

按照我之前的问题Disable resize of brush on range chart from focus charts (dc.js, d3.js) - Solved和我之前的 fiddle ，https://jsfiddle.net/dani2011/uzg48yk7/1/ ，仍然需要在从下拉列表中选择比例之前和/或在页面加载时禁用范围图表上的画笔绘制(!isPostback):

a) 当平移/平移焦点图表的线条(bitChart、bitChart2)时，画笔会显示在范围图表的整个范围上:

b) 可以在范围图表上拖动画笔

尝试使用事件监听器取消缩放事件，如下所示:

  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);

尝试取消事件监听器:

1)直接在我的js文件中

2)范围内图表(timeSlider)

3) 范围内图表事件，例如 .on(render...) 、 .on(postRedraw...)

4) 尝试使用以下方法删除 .on(postRedraw...) 和 (!isPostBack) 内的画笔:

//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();

如有任何帮助，我们将不胜感激。

Answer 1

好的，answer I provided to the previous question用于修复画笔大小的方法被这些行破坏了:

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

没有#alert元素，所以每次都会崩溃。我已经将其恢复为我编写的方式，拖动时有点困惑，但至少它锁定了画笔大小。

至于其他部分，现在我们(终于)开始讨论记录的行为。耶!

它并不完美，但只有在有比例选择时才能启用画笔。首先禁用它:

timeSlider
    .brushOn(false)

然后在选择比例时通过渲染启用它:

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

渲染效果不太好，我们宁愿重绘，但显然图表只会在渲染时查看 .brushOn() 。 Something to look into in the future.

我们还可以禁用使其看起来像有序号画笔并希望被单击的样式，如下所示:

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

要防止焦点图缩放，只需设置.zoomScale()即可:

bitChartGeneral
    .zoomScale([1,1]);

这组 d3.zoom.scaleExtent ，锁定变焦。

这是更新后的 fiddle :https://jsfiddle.net/gordonwoodhull/dsfqeut8/5/