d3js cannot append to clipPath

Question

I try to append a rect element to a clipPath this way :

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

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

In order to use it this way :

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

But the append() of the rect doesn't work, the resulting html is :

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

Do you have any ideas of what's happening ?

Thanks.

Answer 1

I don't see the problem, it works

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>