如何在D3js中为不同的图表显示不同的标题？

var svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

// 创建第一个图表
var chart1 = svg.append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

chart1.append("text")
  .attr("class", "chart-title")
  .attr("x", width / 2)
  .attr("y", -margin.top / 2)
  .text("图表1标题");

// 创建第二个图表
var chart2 = svg.append("g")
  .attr("transform", "translate(" + margin.left + "," + (margin.top + chartHeight + chartSpacing) + ")");

chart2.append("text")
  .attr("class", "chart-title")
  .attr("x", width / 2)
  .attr("y", -margin.top / 2)
  .text("图表2标题");

.chart-title {
  font-size: 18px;
  font-weight: bold;
  text-anchor: middle;
}