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

我是Javascript新手，我正在尝试绘制4个雷达图。每个图表都有不同的标题。我创建TitleOptions变量并在下面调用它。但它显示了每个图表上的所有内容。我可以使用ChartID筛选标题吗？我在下面附上了我的代码。有人能帮我吗

<script>
    var w = 200;
    var h = 200;

    var colorscale = d3.scale.category10();

    //Legend, titles
    var LegendOptions = ['Try Count','Succcess Count', 'Success Rate'];
    var TitleOptions=['Try/Success Count Per Skill', 'Try/Success Rate Per Skill', 'Point Get Per Skill', 'Point Lose Per Skill']

    ////////////////////////////////////////////
    /////////// Initiate legend ////////////////
    ////////////////////////////////////////////
    var svg = d3.select('#body')
    //  .selectAll('svg')
        .append('svg')
        .attr("width", w+300)
        .attr("height", h)

    //Create the title for the legend
var text = svg.append('g').append("text")
    .attr("class", "title")
        .attr('transform', 'translate(90,0)') 
        .attr("x", 30)
        .attr("y", 10)
        .attr("font-size", "12px")
        .attr("fill", "#404040")
    //  .text("What % of owners use a specific service in a week");
        .text(TitleOptions);


    //Initiate Legend   
    var legend = svg.append("g")
        .attr("class", "legend")
        .attr("height", 100)
        .attr("width", 200)
        .attr('transform', 'translate(90,20)') 
        ;
        //Create colour squares
        legend.selectAll('rect')
          .data(LegendOptions)
          .enter()
          .append("rect")
          .attr("x", w - 65)
          .attr("y", function(d, i){ return i * 20;})
          .attr("width", 10)
          .attr("height", 10)
          .style("fill", function(d, i){ return colorscale(i);})
          ;
        //Create text next to squares

        legend.selectAll('text')
          .data(LegendOptions)
          .enter()
          .append("text")
          .attr("x", w - 52)
          .attr("y", function(d, i){ return i * 20 + 9;})
          .attr("font-size", "11px")
          .attr("fill", "#737373")
          .text(function(d) { return d; })
          ;


    //Options for the Radar chart, other than default
    var mycfg = {
      w: w,
      h: h,
      maxValue: 0.6,
      levels: 6,
      ExtraWidthX: 300
    }
    //Load the data and Call function to draw the Radar chart
    //  dynamic data creation
    d3.json("<c:url value='/chart/radarChartData.do?ChartID=${ChartID}&PlayerKey=${PlayerKey}'/>", function(error, data){
        RadarChart.draw("#chart", JSONconverter(data.list), mycfg);
    });
    </script>

var w=200；
var h=200；
var colorscale=d3.scale.category10（）；
//传奇、头衔
var LegOperations=['Try Count'，'Success Count'，'successrate']；
var TitleOptions=[“每项技能的尝试/成功次数”、“每项技能的尝试/成功率”、“每项技能的得分”、“每项技能的失分”]
////////////////////////////////////////////
///////////创始传奇////////////////
////////////////////////////////////////////
var svg=d3。选择（“#body”）
//.selectAll（'svg'）
.append（'svg'）
.attr（“宽度”，w+300）
.attr（“高度”，h）
//为图例创建标题
var text=svg.append（'g'）.append（“text”）
.attr（“类别”、“头衔”）
.attr（'transform'，'translate（90,0）'））
.attr（“x”，30）
.attr（“y”，10）
.attr（“字体大小”，“12px”）
.attr（“填充”，“#404040”）
//.text（“一周内使用特定服务的业主占多大比例”）；
.文本（标题）；
//创始传奇
var legend=svg.append（“g”）
.attr（“类”、“图例”）
.attr（“高度”，100）
.attr（“宽度”，200）
.attr（'transform'，'translate（90,20）'
;
//创建彩色方块
图例。选择全部（'rect'）
.数据（法律法规）
.输入（）
.append（“rect”）
.attr（“x”，w-65）
.attr（“y”，函数（d，i）{返回i*20；}）
.attr（“宽度”，10）
.attr（“高度”，10）
.style（“fill”，函数（d，i）{return colorscale（i）；}）
;
//在正方形旁边创建文本
图例。选择全部（'text'）
.数据（法律法规）
.输入（）
.append（“文本”）
.attr（“x”，w-52）
.attr（“y”，函数（d，i）{返回i*20+9；}）
.attr（“字体大小”，“11px”）
.attr（“填充”，“#737373”）
.text（函数（d）{return d；}）
;
//雷达图的选项，默认值除外
var mycfg={
w:w，
h:h，
最大值：0.6，
级别：6，
额外宽x:300
}
//加载数据并调用函数以绘制雷达图
//动态数据创建
d3.json（“），函数（错误，数据）{
RadarChart.draw（“图表”，JSONconverter（data.list），mycfg）；
});

将绘图部分封装到一个函数中，并调用它四次。比如：

function draw(title) {
  const svg = ..
  ..
  .text(title);
}

draw('title1');
draw('title2');

// or better: 

['title1', 'title2'].forEach(draw);