求助：如何用D3.js的CSS样式实现目标按钮效果

你的问题根源在于直接给foreignObject设置样式，且内部xhtml:body自带默认边距，同时未使用标准按钮元素来实现预期样式。以下是针对性的修改方案：

修改后的完整代码 #

var button = svg.append("foreignObject")
  .attr("x", "5")
  .attr("y", "380")
  .attr("width", 300)
  .attr("height", 40)
  .append("xhtml:div") // 用div替代body，避免默认样式干扰
  .html(`
    <button class="custom-button">View</button>
    <style>
      .custom-button {
        width: 100%;
        height: 100%;
        border: 1px solid #007bff; /* 匹配目标按钮的蓝色边框 */
        border-radius: 4px; /* 按目标图的圆角效果调整数值 */
        background-color: #ffffff;
        color: #007bff;
        font-size: 14px;
        cursor: pointer;
        transition: background-color 0.2s ease;
        border: none; /* 如需保留边框可删除此行，或调整border属性 */
        outline: none;
      }
      .custom-button:hover {
        background-color: #007bff;
        color: #ffffff;
      }
      /* 清除容器默认边距，确保按钮填满空间 */
      div {
        margin: 0;
        padding: 0;
      }
    </style>
  `);

核心调整说明 #

• 替换容器元素：用xhtml:div替代xhtml:body，避免body自带的margin、padding破坏布局，更易控制样式。
• 使用标准按钮：<button>元素自带交互特性，能更精准模拟目标按钮的外观与行为。
• 匹配目标样式细节：
  • 圆角边框：将border-radius调整为4px（目标图的圆角明显大于1px）
  • 颜色交互：默认白底蓝字，悬停时切换为蓝底白字，符合常见按钮逻辑
  • 自适应尺寸：按钮设置width:100%; height:100%，确保填满foreignObject的空间
  • 交互优化：添加cursor: pointer和过渡动画，提升用户体验
• 清除默认样式：给容器div设置margin:0; padding:0，消除布局偏移

额外优化建议 #

如果目标按钮有阴影、字体粗细等细节，可在.custom-button中补充对应样式，例如：

.custom-button {
  /* 原有样式 */
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

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