在从 dropdown/on 页面加载 (dc.js,d3.js) 中选择比例之前禁用范围图表上的画笔

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/，仍然需要在页面加载时从下拉列表中选择比例之前禁用范围图表上的画笔绘制 and/or (!isPostback):

a) panning/translating the line of the focus charts (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

好的，修复画笔大小的被这些行破坏了：

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/

在从 dropdown/on 页面加载 (dc.js,d3.js) 中选择比例之前禁用范围图表上的画笔

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

d3.js

dc.js