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

Question

按照上一个问题Disable resize of brush on range chart from focus charts (dc.js, d3.js) - Solved和我之前的小提琴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（渲染...）,. 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，锁定缩放。

这里有更新的小提琴：https://jsfiddle.net/gordonwoodhull/8yz5s60d/14/