d3js 无法附加到 clipPath

Question

我尝试以这种方式将矩形元素附加到 clipPath 中：

    const mask = innerSpace
        .append('defs')
        .append('clipPath')
        .attr('id', `clipPath`);

    const rectMask = mask
        .append('rect')
        .attr('id', `mask`)
        .attr('width', width)
        .attr('height', height);

为了这样使用它:

    const graphZone = innerSpace
        .append('g')
        .attr('width', width)
        .attr('height', height)
        .attr('clip-path', `url(#mask${this.uniqueId})`)
        .call(zoom);

但是 rect 的 append() 不起作用，结果 html 是：

<defs>
    <clipPath id="clipPath"></clipPath>
</defs>

你知道发生了什么事吗？

谢谢。

Answer 1

我没有发现问题，它有效

var svg = d3.select("svg");
var width = 50, height=50;

const mask = svg
  .append('defs')
  .append('clipPath')
    .attr('id', `clipPath`);

const rectMask = mask
  .append('rect')
    .attr('id', `mask`)
    .attr('width', width)
    .attr('height', height);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="50" height="50"></svg>

d3js 无法附加到 clipPath

d3js cannot append to clipPath

append

clip

d3.js