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

问题描述

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

使用没有画布的画布调整窗口大小

我正在尝试找到一种解决方法，但由于两个 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>

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

标签： javascripthtmlcssd3.jsdc.js

我同意您的分析：如果不将它们都放在另一个 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)
  })

我尝试了每一个，他们“工作”。

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

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

问题描述

解决方案

推荐阅读