禁用从焦点图表（dc.js，d3.js）调整范围图表上画笔的大小 - 解决

Question

请注意 - Gordon Woodhull在Disable brush on range chart before selecting a scale from the dropdown/on page load(dc.js,d3.js)

中解决了部分问题

此外，最后还有一个部分解决方案。

此外还有两个小提琴：

1） https://jsfiddle.net/dani2011/4dsjjdan/1/

2） https://jsfiddle.net/dani2011/uzg48yk7/1/（部分解决方案）

需要通过拖动焦点图表中的线（bitChart，bitChart2）来禁用范围图表上画笔的调整大小（timeSlider）。 正如Gordon Woodhull所建议的那样（Disable brush resize (DC.js, D3.js) 尝试仅启用平移而不进行缩放。

当前行为：

1）

拖动bitChart2（焦点图表）上的线条将画笔移动到timeChart的边框。一旦到达边界，画笔就会缩小。另一个焦点图表（bitChart）在拖动其线条时调整范围图表的画笔。

2）

从下拉列表中选择画笔的范围时，仅加载了bitChart2的.on('zoomed', function (chart, filter) {而不是bitChart的.on("zoomed"...。

从控制台打印屏幕：

a）从下拉列表中选择比例

b）在bitChart上拖动行：

c）在bitChart2上拖动行：

第3）      对于bitChart和bitChart2，scale的值为1，位置为
     是0,0：

.on('zoomed', function (chart, filter) {
  //var zoom = d3.behavior.zoom()
  // .translate([0, 0])
  //.scale(1).scaleExtent([1, 1])
  var zoom = d3.behavior.zoom()
  var scale = zoom.scale(); var position = zoom.translate();

js文件

以下实施无法解决问题：

**option 1**
   bitChart.on('zoomed', function (chart, filter) {
   d3.behavior.zoom().on("zoom", null);//doesn't stop zoom
   //event needs svg element(tried different options),doesn't work
 d3.behavior.zoom().scale(1).scaleExtent([1,1]).translate([0,0]).event(chart.select('g.stack_0')))

**option 2**
   //Applied on timeslider,bitChart,bitChart2 to eliminate zoom and   
   //maintain pan
  .zoomScale([1, 1])//dc.js
  //And also
  .on('zoomed', function (chart, filter) {
  bitChart.zoomScale([1, 1]);
  //Nothing pans with
  chart.focus(chart.xOriginalDomain())

**option 3**
  bitChart.on('zoomed', function (chart, filter) {
  var svg = d3.select("body")
      .append("svg")
      .call(d3.behavior.zoom().on("zoom", function () {
       svg.attr("transform", "translate(" + d3.event.translate + ")" +"   
       scale(" + 1 + ")")
      }))
     //.append("g")



 **option 4**
      .on('zoomed', function (chart, filter) {
        var chartBody = chart.select('g.stack _0');
        var path = chartBody.selectAll('path.line').data([extra_data]);
        path.enter().append('path').attr({
            class: 'line',
        });
        path.attr('transform', 'translate(0,50)');



**option 5**

    bitChart.on('zoomed', function (chart, filter) {
    var zoom = d3.behavior.zoom()
   .scaleExtent([1, 1])
    chart.select('g.stack _0').call(zoom);
    zoom.scale(1);
    zoom.event(chart.select('g.stack _0'));

  **option 6**
   bitChart.on('zoomed', function (chart, filter) {
   svg.call(d3.behavior.zoom().scale(1));

   **option 7**
   var min_zoom = 1;
   var max_zoom = 1;
   var svg = d3.select("body").append("svg");
   var zoom = d3.behavior.zoom().scaleExtent([min_zoom, max_zoom])
   bitChart.on('zoomed', function (chart, filter) {
   svg.call(zoom);

我的小提琴：

https://jsfiddle.net/dani2011/4dsjjdan/1/来自https://jsfiddle.net/gordonwoodhull/272xrsat/9/。

从下拉列表中选择范围并单击范围图表时，范围图表（timeSlider）在小提琴上表现异常，但在我的环境中运行时表现如预期。请注意，在这个小提琴中 bitChart2按预期平移画笔。到达边缘时刷子的大小调整发生在我的环境中。 bitChart仍会调整画笔大小。

部分解决方案：

在单个范围图表上启用多焦点图表，如Gordon Woodhull编写的https://github.com/dc-js/dc.js/blob/master/web/examples/multi-focus.html所示。使用在我的代码（bitChart2）中正常工作的焦点图表作为主要参考图表：

bitChart2.focusCharts = function (chartlist) {
    if (!arguments.length) {
        return this._focusCharts;
    }
    this._focusCharts = chartlist; // only needed to support the getter above
    this.on('filtered', function (range_chart) {
        if (!range_chart.filter()) {
            dc.events.trigger(function () {
                chartlist.forEach(function(focus_chart) {
                    focus_chart.x().domain(focus_chart.xOriginalDomain());
                });
            });
        } else chartlist.forEach(function(focus_chart) {
            if (!rangesEqual(range_chart.filter(), focus_chart.filter())) {
                dc.events.trigger(function () {
                    focus_chart.focus(range_chart.filter());
                });
            }
        });
    });
    return this;
};
bitChart2.focusCharts([bitChart]);

我的第二个小提琴：

https://jsfiddle.net/dani2011/uzg48yk7/1/来自https://jsfiddle.net/gordonwoodhull/272xrsat/9/。

1）点击小提琴中的范围图表时，它无法正常工作，但在我的环境中有效。

2）画笔不会像在我的环境中那样在小提琴的范围图表边缘调整大小

3）当在平移/点击焦点图表中的线条和单击范围图表时选择整个范围图表时，确实显示了整个范围图表

4）它确实在小提琴中显示从下拉列表中选择画笔跨度后，平移焦点图表中的线条会在范围图表上正确移动画笔。

5）它确实在小提琴中显示，从下拉列表中选择在范围图表上拖动画笔可以再次从下拉列表中选择

仍需要解决：

1）当到达范围图表（timeSlider）的末尾时，画笔调整大小

通过将版本更新为与小提琴https://jsfiddle.net/gordonwoodhull/272xrsat/9/中的外部资源版本相同，

已解决。 谢谢戈登！

2）在从下拉列表中选择比例之前：

a）平移/翻译焦点图表的行（bitChart，bitChart2）时，画笔调整大小

b）可以再次在范围图表上拖动画笔

任何帮助将不胜感激！