[Solved]-D3 Multi Series Line Chart with Clickable Legend-d3.js

i'm posting the solution that i used. https://jsfiddle.net/yasirunilan/rvoft1h8/7/

var data = [{
    name: "usa",
    values: [{
        date: "2000",
        price: "100"
      },
      {
        date: "2001",
        price: "110"
      },
      {
        date: "2002",
        price: "145"
      },
      {
        date: "2003",
        price: "241"
      },
      {
        date: "2004",
        price: "101"
      },
      {
        date: "2005",
        price: "90"
      },
      {
        date: "2006",
        price: "10"
      },
      {
        date: "2007",
        price: "35"
      },
      {
        date: "2008",
        price: "21"
      },
      {
        date: "2009",
        price: "201"
      }
    ]
  },
  {
    name: "canada",
    values: [{
        date: "2000",
        price: "100"
      },
      {
        date: "2001",
        price: "110"
      },
      {
        date: "2002",
        price: "145"
      },
      {
        date: "2003",
        price: "241"
      },
      {
        date: "2004",
        price: "101"
      },
      {
        date: "2005",
        price: "90"
      },
      {
        date: "2006",
        price: "10"
      },
      {
        date: "2007",
        price: "35"
      },
      {
        date: "2008",
        price: "21"
      },
      {
        date: "2009",
        price: "201"
      }
    ]
  },
  {
    name: "maxico",
    values: [{
        date: "2000",
        price: "100"
      },
      {
        date: "2001",
        price: "110"
      },
      {
        date: "2002",
        price: "145"
      },
      {
        date: "2003",
        price: "241"
      },
      {
        date: "2004",
        price: "101"
      },
      {
        date: "2005",
        price: "90"
      },
      {
        date: "2006",
        price: "10"
      },
      {
        date: "2007",
        price: "35"
      },
      {
        date: "2008",
        price: "21"
      },
      {
        date: "2009",
        price: "201"
      }
    ]
  }
];

var width = 500;
var height = 300;
var margin = 50;
var duration = 250;

var lineopacity = "0.25";
var lineopacityhover = "0.85";
var otherlinesopacityhover = "0.1";
var linestroke = "1.5px";
var linestrokehover = "2.5px";

var circleopacity = '0.85';
var circleopacityonlinehover = "0.25"
var circleradius = 3;
var circleradiushover = 6;


/* format data */
var parsedate = d3.timeparse("%y");
data.foreach(function(d) {
  d.values.foreach(function(d) {
    d.date = parsedate(d.date);
    d.price = +d.price;
  });
});


/* scale */
var xscale = d3.scaletime()
  .domain(d3.extent(data[0].values, d => d.date))
  .range([0, width - margin]);

var yscale = d3.scalelinear()
  .domain([0, d3.max(data[0].values, d => d.price)])
  .range([height - margin, 0]);

var color = d3.scaleordinal(d3.schemecategory10);

/* add svg */
var svg = d3.select("#chart").append("svg")
  .attr("width", (width + margin) + "px")
  .attr("height", (height + margin) + "px")
  .append('g')
  .attr("transform", `translate(${margin}, ${margin})`);


/* add line into svg */
var line = d3.line()
  .x(d => xscale(d.date))
  .y(d => yscale(d.price));

let lines = svg.append('g')
  .attr('class', 'lines');

lines.selectall('.line-group')
  .data(data).enter()
  .append('g')
  .attr('id',function(d){ return d.name.replace(/\s+/g, '')+"-line"; })
  .attr('class', 'line-group')
  .on("mouseover", function(d, i) {
    svg.append("text")
      .attr("class", "title-text")
      .style("fill", color(i))
      .text(d.name)
      .attr("text-anchor", "middle")
      .attr("x", (width - margin) / 2)
      .attr("y", 5);
  })
  .on("mouseout", function(d) {
    svg.select(".title-text").remove();
  })
  .append('path')
  .attr('class', 'line')
  .attr('d', d => line(d.values))
  .style('stroke', (d, i) => color(i))
  .style('opacity', lineopacity)
  .on("mouseover", function(d) {
    d3.selectall('.line')
      .style('opacity', otherlinesopacityhover);
    d3.selectall('.circle')
      .style('opacity', circleopacityonlinehover);
    d3.select(this)
      .style('opacity', lineopacityhover)
      .style("stroke-width", linestrokehover)
      .style("cursor", "pointer");
  })
  .on("mouseout", function(d) {
    d3.selectall(".line")
      .style('opacity', lineopacity);
    d3.selectall('.circle')
      .style('opacity', circleopacity);
    d3.select(this)
      .style("stroke-width", linestroke)
      .style("cursor", "none");
  });


/* add circles in the line */
lines.selectall("circle-group")
  .data(data).enter()
  .append("g")
  .attr('id',function(d){ return d.name.replace(/\s+/g, '')+"-circle"; })
  .style("fill", (d, i) => color(i))
  .selectall("circle")
  .data(d => d.values).enter()
  .append("g")
  .attr("class", "circle")
  .on("mouseover", function(d) {
    d3.select(this)
      .style("cursor", "pointer")
      .append("text")
      .attr("class", "text")
      .text(`${d.price}`)
      .attr("x", d => xscale(d.date) + 5)
      .attr("y", d => yscale(d.price) - 10);
  })
  .on("mouseout", function(d) {
    d3.select(this)
      .style("cursor", "none")
      .transition()
      .duration(duration)
      .selectall(".text").remove();
  })
  .append("circle")
  .attr("cx", d => xscale(d.date))
  .attr("cy", d => yscale(d.price))
  .attr("r", circleradius)
  .style('opacity', circleopacity)
  .on("mouseover", function(d) {
    d3.select(this)
      .transition()
      .duration(duration)
      .attr("r", circleradiushover);
  })
  .on("mouseout", function(d) {
    d3.select(this)
      .transition()
      .duration(duration)
      .attr("r", circleradius);
  });


/* add axis into svg */
var xaxis = d3.axisbottom(xscale).ticks(5);
var yaxis = d3.axisleft(yscale).ticks(5);

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", `translate(0, ${height-margin})`)
  .call(xaxis);

svg.append("g")
  .attr("class", "y axis")
  .call(yaxis)
  .append('text')
  .attr("y", 15)
  .attr("transform", "rotate(-90)")
  .attr("fill", "#000")
  .text("total values");


var datanest = d3.nest()
  .key(function(d) {
    return d.name;
  })
  .entries(data);

var legendspace = width / datanest.length;

// loop through each symbol / key
datanest.foreach(function(d, i) {

  // add the legend
  svg.append("text")
    .attr("x", (legendspace / 2) + i * legendspace) // space legend
    .attr("y", height)
    .attr("class", "legend") // style the legend
    .style("fill", color(i))
    .on("click", function() {
      // determine if current line is visible
      var active = d.active ? false : true,
        newopacity = active ? 0 : 1;
      // hide or show the elements based on the id
      d3.select("#" + d.key.replace(/\s+/g, '') + "-line")
        .transition().duration(100)
        .style("opacity", newopacity);
      d3.select("#" + d.key.replace(/\s+/g, '') + "-circle")
        .transition().duration(100)
        .style("opacity", newopacity);
      // update whether or not the elements are active
      d.active = active;
    })
    .text(d.key);
});