I am trying to hide and show points on my line chart when I click on the text of my legend. Here is the [link](https://jsfiddle.net/m6tg4krn/) to my current fiddle. From my fiddle, my blue line working properly as it is showing and hiding on every click of 'Value'. However, the points are not doing so when I click on 'Point'. 

I also tried following the advice in this [link](https://stackoverflow.com/questions/42404329/d3-js-multiple-line-graph-toggle-dots-on-off) but to no avail. Any help is greatly appreciated!

```
    var data = [ {x: 0, y: 0}, {x: 5, y: 30}, {x: 10, y: 40},
                {x: 15, y: 60}, {x: 20, y: 70}, {x: 25, y: 100} ];

    const margin = {
      left: 20,
      right: 20,
      top: 20,
      bottom: 80
    };

    const svg = d3.select('svg');
    svg.selectAll("*").remove();

    const width = 200 - margin.left - margin.right;
    const height = 200 - margin.top - margin.bottom;

    const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`);

    var x = d3.scaleLinear()
            .domain([0, d3.max(data, function(d){ return d.x; })])
            .range([0,width])
            .nice();

    var y = d3.scaleLinear()
            .domain([0, d3.max(data, function(d){ return d.y; })])
            .range([0,height])
            .nice();

    const xAxis = d3.axisTop()
                .scale(x)
                .ticks(5)
                .tickPadding(5)
                .tickSize(-height)

    const yAxis = d3.axisLeft()
                .scale(y)
                .ticks(5)
                .tickPadding(5)
                .tickSize(-width);

    svg.append("g")
      .attr("class", "x axis")
      .attr("transform", `translate(20,${height-margin.top-60})`)
      .call(xAxis);

    svg.append("g")
      .attr("class", "y axis")
      .attr("transform", "translate(20,20)")
      .call(yAxis);

    var lineFunction = d3.line()
    .x(function(d) {return x(d.x); })
    .y(function(d) {return y(d.y); })
    .curve(d3.curveLinear);

    //defining and plotting the lines
    var path = g.append("path")
                .attr("class", "path1")
                .attr("id", "blueLine")
                .attr("d", lineFunction(data))
                .attr("stroke", "blue")
                .attr("stroke-width", 2)
                .attr("fill", "none")
                .attr("clip-path", "url(#clip)");

          // plot a circle at each data point
          g.selectAll(".dot")
              .data(data)
              .enter().append("circle")
              .attr("cx", function(d) { return x(d.x); } )
              .attr("cy", function(d) { return y(d.y); } )
              .attr("r", 3)
              .attr("class", "blackDot")
              .attr("clip-path", "url(#clip)");

      //************* Legend ***************
      var legend = svg.selectAll(".legend")
              .data(data)
              .enter().append("g")

            legend.append("rect")
              .attr("x", width + 65)
              .attr("y", 50)
              .attr("width", 18)
              .attr("height", 4)
              .style("fill", "blue")

            legend.append("text")
              .attr("x", width + 60)
              .attr("y", 50)
              .attr("dy", ".35em")
              .style("text-anchor", "end")
              .on("click", function(){
              // Determine if current line is visible
              var active   = blueLine.active ? false : true,
                newOpacity = active ? 0 : 1;
              // Hide or show the elements
              d3.select("#blueLine").style("opacity", newOpacity);
              // Update whether or not the elements are active
              blueLine.active = active;
              })
                .text(function(d) {
                  return "Value";
                });

      var pointLegend = svg.selectAll(".pointLegend")
              .data(data)
              .enter().append("g")

            pointLegend.append("circle")
              .attr("r", 3)
              .attr("cx", width + 70)
              .attr("cy", 70)

            pointLegend.append("text")
              .attr("x", width + 60)
              .attr("y", 70)
              .attr("dy", ".35em")
              .style("text-anchor", "end")
            .on("click", function(){
            // Determine if dots are visible
            var active   = blackDot.active ? false : true,
              newOpacity = active ? 0 : 1;
            // Hide or show the elements
            d3.selectAll(".blackDot").style("opacity", newOpacity);
            // Update whether or not the elements are active
            blackDot.active = active;
            })
              .text(function(d) {
                return "Point";
              });

```