正确叠加 DC.JS (D3) canvas 元素

Question

似乎 canvas 实施 DC.JS 的散点图有一些特定的东西，当调整 window 大小时，canvas 元素不符合轴的定位。由于标题的移动

pre-window 调整大小 和canvas 没有canvas

这似乎是由 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

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

我不确定你能控制什么，但最简单的解决方法似乎是在标题结束后换行：Gains and losses<br>

如果你不能改变它但可以改变 CSS 你可以在标签中做一个 clear:both。

Answer 2

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

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

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

SVG 被文本向下移动，但 canvas 不是。不确定为什么您的屏幕截图中没有显示。

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

  <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)
  })

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

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

正确叠加 DC.JS (D3) canvas 元素

Correctly Overlay DC.JS (D3) canvas elements

javascript

html

css

d3.js

dc.js