在从下拉式/页面加载（dc.js，d3.js）中选择缩放之前，禁用范围图表上的刷

问题描述

按照我上一个问题

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）
 
尝试使用不同的SVG范围，而不是anotherRoot，例如：
 
 //选项1 
 var rootSvg = d3.select （＃bitrate-timeSlider-chart svg brush）
 //选项2 
 var brushSVG = d3.select（＃bitrate-timeSlider-chart）。select（g.brush）。选择（*）; 
 //选项3 
 d3.select（＃bitrate-timeSlider-chart）。on（touchstart.zoom，null）; 
 d3.select（＃bitrate-timeSlider-chart）。on（mouse.zoom，
 
 null）; 
  

尝试取消事件监听器：

1）直接在我的js文件中

2）在范围图表内（timeSlider）

范围图事件，如.on（render ...），.on（postRedraw ...）

4）尝试删除.on ...）and in（！isPostBack）using：

  // JS文件
 function isPostBack / function检查页面是否是回发的一个
 return document.getElementById（'_ ispostback'）。value =='True'; 
} 
 
 // HTML文件
 .... 
< / script> 
< input type =hiddenid =_ ispostbackvalue =<％= Page.IsPostBack.ToString（）％> /> 
< / body> 
< / html> 
 
 
 d3.select（＃bitrate-timeSlider-chart）。selectAll（g.brush）。selectAll（*）。data（data [0]）。 exit（）。remove（）; 
  

任何帮助将不胜感激。

解决方案

好的，修复画笔大小的由这些行打断：

  document.getElementById（alert）。style.display =inline 
  

没有#alert元素，因此每次都会崩溃。我已经恢复了它的方式，我写它，它是一个有点凌乱，当你拖动，但至少它锁定画笔的大小。

至于其他部分，现在我们（最后）得到记录的行为。 Yay！

这不是完美的，但只有在有比例选择的情况下才能启用笔刷。只要先停用即可：

  timeSlider 
 .brushOn（false）
  
 
 
 
，然后在选择比例时使用渲染器启用它：
  function addHours（amountHours）{
 var showBrush = + amountHours！== 0; 
 if（timeSlider.brushOn（）！== showBrush）
 timeSlider.brushOn（showBrush）
 .render（）; 
  
渲染不是很好，我们宁愿重绘，但显然图表只会在 .brushOn（）。 。
 
 
 
我们也可以禁用使它看起来像是有序刷子并希望被点击的样式，例如：
  .dc-chart rect.bar {
 cursor：default; 
} 
 .dc-chart rect.bar:hover {
 fill-opacity：1; 
} 
  
为防止焦点图表上的缩放，您只需要设置 .zoomScale（）：
  bitChartGeneral 
 .zoomScale ，1]）; 
  
这会设置，锁定缩放。
 
 
 
这是更新的小提琴： 
 
Following my previous question Disable resize of brush on range chart from focus charts (dc.js, d3.js) 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.
 解决方案 
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/
                        
这篇关于在从下拉式/页面加载（dc.js，d3.js）中选择缩放之前，禁用范围图表上的刷的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！