React+TypeScript+D3.js：如何将KDE图对齐到散点图边缘

我用React+TypeScript配合D3.js开发可视化组件，组件包含多数据集散点图以及对应x、y轴的KDE（核密度估计）图。两种图表的功能已实现，但无法将KDE图对齐到预期位置——需要达到类似MATLAB中scatterhist的效果：x轴KDE图放在散点图顶部，y轴KDE图放在散点图右侧。

尝试过用.attr("transform", translate(${width},${0}))这类变换属性调整位置，但始终无法将KDE图放到SVG画布的正确区域。

相关代码片段 #

// 示例代码（替换为你的实际实现）
const totalWidth = 800;
const totalHeight = 600;
const margin = { top: 80, right: 80, bottom: 80, left: 80 };
const scatterWidth = totalWidth - margin.left - margin.right;
const scatterHeight = totalHeight - margin.top - margin.bottom;

const svg = d3.select("#visualization")
  .append("svg")
  .attr("width", totalWidth)
  .attr("height", totalHeight);

// 散点图容器
const scatterGroup = svg.append("g")
  .attr("transform", `translate(${margin.left}, ${margin.top})`);

// 顶部x轴KDE图容器（位置错误）
const xKdeGroup = svg.append("g")
  .attr("transform", `translate(${margin.left}, 0)`);

// 右侧y轴KDE图容器（位置错误）
const yKdeGroup = svg.append("g")
  .attr("transform", `translate(${totalWidth - margin.right}, ${margin.top})`);

效果对比 #

• 当前输出：当前渲染效果截图
• 期望效果：MATLAB scatterhist样式截图

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