Home/ Questions/Q 9111713
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T03:34:16+00:00

I have a button which draws a line and some dots on that line

  • 0

I have a button which draws a line and some dots on that line on a graph. I have a second button which removes the line and the dots. I’m trying to use the same button for both functions.

Im having some difficulty with it. Has anyone seen anything like this before?

Here are my two functions. Thanks in advance!

 //Draws line and dots
 d3.select(".button1").on("click", function(){
  var path = svg.append("path")   // Add the valueline path. 
          .attr("class", "line")
          .attr("d", valueline(data))
          .attr("stroke", "steelblue")
          .attr("stroke-width", "5")
          .attr("fill", "black");


svg.selectAll("dot")
    .data(data)
.enter().append("circle")
    .attr("class", "firstDots")
    .attr("r", 5)
    .attr("cx", function(d) { return x(d.date); })
    .attr("cy", function(d) { return y(d.close); })

      var totalLength = path.node().getTotalLength();


  path
    .attr("stroke-dasharray", totalLength + "30" * 30)
    .attr("stroke-dashoffset", totalLength)
    .transition()
      .duration(2000)
      .ease("linear")
      .attr("stroke-dashoffset", 0);

     //Removes line and dots
     d3.select(".button2").on("click", function(){
      path.remove();

  var removeDot = svg.selectAll(".firstDots")
                .remove();

     });

});

At first I tried passing the class of the buttons back and forth on each click event, it works for drawing and removing. But only once, so I am not able to draw the line and second time.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You could move the path variable outside the event-handler:

    <!DOCTYPE html>
<html>
<head>
    <script src='http://d3js.org/d3.v3.min.js'></script>
</head>
<body>
    <button>Toggle path</button>
    <script>
    var svg = d3.select('body')
        .append('svg')
        .attr('width', 500)
        .attr('height', 250);   

    var path;

    d3.select('button').on('click', function() {

        if ( path ) {
            path.remove();
            // Remove dots
            path = null;
        } else {
            path = svg.append('path')
                .attr('class', 'line')
                .attr('d', 'M100,150 Q200,25 300,150 T500,150')
                .attr('stroke', 'steelblue')
                .attr('stroke-width', '5')
                .attr('fill', 'black');
            // Add dots etc.
        }        
    });
    </script>
</body>
</html>
    • 0