正确覆盖 DC.JS (D3) 画布元素

Question

似乎 DC.JS 的散点图的画布实现有一些特定的东西，当调整窗口大小时，画布元素不尊重轴的位置。由于标题的移动

预先调整窗口大小 带画布 没有画布

这似乎是由 canvas 元素的absolute positioning 引起的。

我正在尝试找到一种解决方法，但由于两个 DOM 元素周围没有任何组，所以没能做到：

<div data-css-1gb1n6i="" class="dc-chart" style="position: relative">
  <span data-css-m549sg="">reset</span>
  <label>Gains or Losses</label>
  <svg width="922" height="200" style="position: relative; z-index: 1">...</svg>
  <canvas
    x="0"
    y="0"
    width="1660"
    height="296"
    style="
      width: 830px;
      height: 148px;
      position: absolute;
      top: 10px;
      left: 42px;
      z-index: 0;
      pointer-events: none;
    "
  ></canvas>
</div>

working stackblitz（调整查看器大小以查看错误）

Answer 1

我同意你的分析：如果不把它们都放在另一个div中，我不知道如何将画布放在与SVG相同的位置。

dc.js 不能很好地处理 div 内的额外内容，尽管这是唯一支持重置和过滤显示控件的地方。

确实，当我查看您的 stackblitz 时，由于重置按钮和收益和损失标签，它出现了另一个错误：

SVG 被文本向下移动，但画布没有。不知道为什么您的屏幕截图中没有显示。

我认为唯一简单的解决方案是让重置和标签绝对定位

  <label style={{position: 'absolute', left: 0, top: 0}}>{title}</label>

const ResetButton = (props: any) => {
  const style = css({
    // padding: rhythm(0.1),
    display: 'inline',
    cursor: 'pointer',
    position: 'absolute',
    right: 0,
    top: 0,
    '&:hover': {
      background: '#ddd',
    },
  });

或使 svg 绝对定位到 0,0

  eventScatterChart.on('pretransition', chart => {
    chart.select('svg')
      .style('z-index', 1)
      .style('position', 'absolute')
      .style('left', 0)
      .style('top', 0)
    chart.select('canvas').style('z-index', 0)
  })

我尝试了其中的每一个，并且它们“有效”。

它们让您不得不手动定位标签和重置按钮。

Answer 2

如果窗口足够宽，似乎标题、收益和损失以及轴标签将彼此相邻。当它变窄时，系统会将轴标签放在标题下方，一切都很好，但是当您增加窗口时，两者并排移动，并且由于它们都是相对的，因此收益和损失会将轴标签推到右侧。

我不确定您可以控制什么，但最简单的解决方法似乎是在标题末尾放置一个换行符：Gains and losses<br>

如果您不能更改它但可以更改 CSS，您可以在标签中添加 clear:both。