当我向我的 svg 添加标题和副标题时，它们会出现在我的图形上方答案

【问题标题】：when I add a title and a subtitle to my svg they get above my graphic当我向我的 svg 添加标题和副标题时，它们会出现在我的图形上方
【发布时间】：2019-09-05 15:09:42
【问题描述】：

我基本上有一个条形图，我想放 2 个文本。我想在离我的图表一定距离的地方放置一个标题（例如前 30px）。我想在离图表一定距离的地方放一个字幕，使其位于右下角（例如底部 30px）

无论我用什么方法，我的文字总是在我的图形上方，我希望我在图形和文字之间有分隔边距。

想要的效果：

我做错了什么？

这是我的实时代码：

https://plnkr.co/edit/mRjyYN9nWiMWYRzj7Gtf?p=preview

var svg = d3.select("body").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform",
    "translate(" + margin.left + "," + margin.top + ")");


//set title
svg.append("text")
  .attr("x", (width / 2))
  .attr("y", 0 - (margin.top / 2))
  .attr("text-anchor", "middle")
  .style("font-size", "18px")
  .text("title");


//set bottom-right text

svg.append("text")
  .attr("x", 960 - 80)
  .attr("y", 500 - 30)
  .attr("text-anchor", "middle")
  .style("font-size", "14px")
  .text("subtitle");

当前使用您的代码的问题（用户 lemming）：

【问题讨论】：

“我想放 2 个文本。一个在我的图表上方而不是在图表上方”。你能澄清一下你的意思吗？
@BrettGregson 抱歉，我的母语是西班牙语。我想在离我的图表一定距离的地方放置一个标题（例如前 30px）。我想在离图表一定距离的地方放置一个字幕，使其位于右下角（例如底部 30px）。
y 轴不在顶部，因为您为文本的 y 值分配了一个负值：0 - (margin.top / 2)。为了让它进入框架，y 值需要是正的。尝试 0 + (margin.top / 2)。
plnkr.co/edit/yLtkdsk7gPDrgxjDl7cS?p=preview
@lemming 谢谢，但它对我不起作用...同样的问题，标题和图表之间没有空格，副标题和图表之间没有空格

标签： javascript d3.js

【解决方案1】：

通常，您从要渲染到的 div 的尺寸中减去边距，如下所示，假设 div 为 800 x 600

// set the dimensions and margins of the graph
var margin = {top: 10, right: 30, bottom: 30, left: 50},
    width = 800 - margin.left - margin.right,
    height = 600 - margin.top - margin.bottom;

这有意义吗？

【讨论】：

@lemming 已在您的 plunk 中修复它
这不是我的问题的解决方案:(