var width = 500,
        height = 500;
    var svg = d3.select('.main-container')
                .append('svg')
                .attr('width', 600)
                .attr('height', 600);

    var xScale = d3.scaleBand()
                  .range([0, width - 100])
                  .padding(0.4),
        yScale = d3.scaleLinear()
                   .range([height - 100, 0]);

    g = svg.append("g").attr("transform", "translate(" + 100 + "," + 100 + ")");

    xScale.domain(year);

    yScale.domain([d3.min(values), d3.max(values)]);

    g.append("g").attr("transform", "translate(0," + (height - 100) + ")")
                 .call(d3.axisBottom(xScale));
    g.append("g").attr("transform", "translate(0,0)")
                 .call(d3.axisLeft(yScale).ticks(8));


  **/* I need to pass the json data here to plot the corresponding path for each countries here  */**
  g.append("path")
  .attr("d",  -------)
  .attr("stroke", "blue")
  .attr("stroke-width", 2)
  .attr("fill", "none");

});



**json Data :**

{
    "22": [{
        "Country": "Rainfall",
        "2010": "10",
        "2011": "20",
        "2012": "41",
        "2013": "85.5",
        "2014": "114",
        "2015": "120",
        "2016": "130",
        "2017": "144.5"
    }, {
        "Country": "Tokyo",
        "2010": "12",
        "2011": "21",
        "2012": "42",
        "2013": "86.5",
        "2014": "115",
        "2015": "121",
        "2016": "131",
        "2017": "145.5"
    }]
}