D3.js技术问题：向已有矩形追加子矩形后无法显示

核心原因：SVG元素层级违规 #

SVG规范里，<rect>属于图形元素，不能作为其他图形元素的容器。你把新矩形追加到已有<rect>内部，浏览器不会渲染这类子元素——这就是HTML检查器能看到元素，但页面上完全不显示的根本原因。

代码问题拆解与修复步骤 #

1. 重构DOM结构，用分组承载矩形
   改用<g>（分组元素）绑定数据，再把基础时间线矩形和事件高亮矩形都放在同一个分组下，既符合SVG规范，又能保持数据关联：

   // 先创建分组并绑定数据源
   const groups = this.graph.selectAll(".bar-group")
     .data(你的数据源) // 替换成实际的数据源变量
     .enter()
     .append("g")
     .attr("class", "bar-group");
   
   // 追加基础时间线矩形到分组
   groups.append("rect")
     .attr("class", "innerRects")
     .attr("rx", 3)
     .attr("ry", 3)
     .attr("x", (d: any) => this.timeScale(dateFormat(d.startTime)) + this.sidePadding)
     .attr("y",(d, i) =>  i * this.gap + this.topPadding )
     .attr("width", (d: any) => this.timeScale(dateFormat(d.endTime)) - this.timeScale(dateFormat(d.startTime)))
     .attr("height", this.barHeight)
     .attr("stroke", "none")
     .style("cursor", "pointer")
     .style("fill",(d: any) => d.color);
   
   // 追加事件高亮矩形到分组
   const that = this; // 保存外部this，避免回调里指向混乱
   groups.each(function(d) {
     const group = d3.select(this);
     // 假设d.events是当前时间线关联的事件数组，需根据实际数据结构调整
     group.selectAll(".innerRects2")
       .data(d.events || []) // 绑定事件数组，确保是数组类型
       .enter()
       .append("rect")
       .attr("class", "innerRects2")
       .attr("width", (event: any) => that.timeScale(dateFormat(event.endTime)) - that.timeScale(dateFormat(event.startTime)))
       .attr("height", 20)
       // 事件矩形的x基于自身时间，用绝对坐标定位
       .attr("x", (event: any) => that.timeScale(dateFormat(event.startTime)) + that.sidePadding)
       // 给y坐标加偏移，避免被基础矩形完全覆盖
       .attr("y", (_, i) =>  i * that.gap + that.topPadding + 5)
       .style("fill", "red");
   });
   

2. 修正数据绑定错误
   原代码里.data(d)是错误用法——data()方法需要接收数组类型。如果每个时间线对应多个事件，要传入事件数组（比如d.events），再通过enter()处理新增的事件矩形。

3. 修复this指向混乱问题
   普通回调函数里的this会指向当前DOM元素，提前用that = this保存外部上下文，就能正常访问timeScale、gap等变量。

4. 调整坐标避免元素重叠
   原代码里事件矩形和基础矩形的y坐标完全一致，即使渲染成功也会被覆盖。给事件矩形加个小偏移（比如+5），就能看到高亮效果。

验证检查项 #

• 查看SVG结构：所有<rect>必须直接在<g>或<svg>下，不能嵌套在其他<rect>里
• 确认事件数据是数组，且startTime/endTime格式能被timeScale正确解析
• 用开发者工具检查事件矩形的属性：确保width不为0，x/y坐标在可视范围内

内容的提问来源于stack exchange，提问作者afish