小编Dan*_*ani的帖子

我有一个表 - 让我们称之为表1.当单击表1中的一行时,正在显示另一个表,我们称之为表2.表2显示了与表1中单击的行相关的数据.有时需要垂直滚动要显示在表2中,有时不是 - 取决于行数.需要解决的问题:当没有显示滚动时,边框会发生不必要的转换:

.解决方案的想法:根据显示滚动是否退出的条件 " 改变margin-right".将此条件的结果保存到Redux prop:element.scrollHeight> element.clientHeight || element.scrollWidth>
element.clientWidth

问题:尝试将滚动的显示/不显示从不同的React事件(如componentDidMount,componentWillReceiveProps,CopmponentDidUpdate(设置状态导致infinte循环)和click事件更新到redux prop中.尝试使用forceUpdate()之后将道具设置为Redux也是如此.

当console.log以chrome(F12)进入控制台时,唯一与滚动条的显示/非显示正确关联的结果来自componentDidUpdate,并且它没有反映在redux prop中(isoverflown函数返回true ,redux this.props.scrollStatus和this.state.scrollStatus都是假的).也不喜欢document.getElementById用于包含行的div,因为它在props和state中打破了dom的操作,但是现在没有找到不同的解决方案.

显示滚动条时的F12控制台:

没有显示滚动条时的F12控制台: .

其余代码:

1)行动:

      export function setScrollStatus(scrollStatus) {
         return {
              type: 'SET_SCROLL_STATUS',
              scrollStatus: scrollStatus
         };
      }

2)减速机:

      export function scrollStatus(state = [], action) {
           switch (action.type) {
              case 'SET_SCROLL_STATUS':
                  return action.scrollStatus;
              default:
                  return state;
         }
     }

3)Page.js(请点击图片查看代码)

import {setScrollStatus} from '../actions/relevantfilename';

function isOverflown(element) {
    return element.scrollHeight > element.clientHeight ||element.scrollWidth > element.clientWidth;
} …

刷子范围只需从下拉列表中更改,如下所示:https://jsfiddle.net/dani2011/67jopfj8/3/

需要禁用刷扩展:

1)使用画笔的手柄/调整大小区域扩展现有画笔

汉代的灰色圈子是:

2)通过单击画笔背景拖动新画笔,其中显示了发光光标.

JavaScript文件

删除了刷子的手柄:

timeSlider.on('preRedraw',function (chart)
    {
        var timesliderSVG = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").selectAll("g.resize").selectAll("*").data(data[0]).exit().remove();})

如果使用css代替:

#bitrate-timeSlider-chart g.resize {
           display:none;
           visibility:hidden;

现在它看起来像这样:

.

删除了"resize e","resize w"中的rect和path元素:

然而,用于扩展画笔的"resize e","resize w"仍然存在:

g.resize.e和g.resize.w dimesions是0*0:

此外,在删除"resize e","在chrome中的"开发者工具/元素"中调整大小"后,它们会在移动画笔后重新出现.

试图删除brushstart,brush,brushend中的resize-area:

timeSlider.on('renderlet', function (chart) {
var brushg = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush");
var resizeg = brushg.selectAll("g.resize").selectAll("*").data(data[0]);       
var timesliderSVG4 = 
brushg.on("brushstart", function () {resizeg.exit().remove()}).on("brush", function () { resizeg.exit().remove() }).on("brushend", function () {resizeg.exit().remove() })

dc.js文件

试图更改setHandlePaths,resizeHandlePath:

1) 备注_chart.setHandlePaths(gBrush):

_chart.renderBrush = function (g) …