How to show different titles for different chart in D3js?

Question

I am new to Javascript and i am trying to draw 4 radar charts. Each chart has different title. I create TitleOptions var and call it below. but it shows everything on every chart. Can I filter the title by using ChartID? I attached my code below. and could anyone help me with this?

<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>

Answer 1

Encapsulate the drawing part into a function and call it four times. Something like:

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

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

// or better: 

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