javascript - Toggle button for D3.js

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.

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 Improve this question asked Jan 8, 2013 at 18:10 Daft 11k16 gold badges65 silver badges105 bronze badges

Could you post a plete example to jsfiddle please? – Lars Kotthoff Commented Jan 8, 2013 at 18:41
You need to move the assigning of the .button2 click event-handler outside the .button1 click event-handler function, otherwise you're binding another .button2 handler every time .button1 is clicked. – MikeM Commented Jan 9, 2013 at 11:56

Add a ment |

1 Answer 1

Sorted by: Reset to default 3

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

<!DOCTYPE html>
<html>
<head>
    <script src='http://d3js/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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Toggle button for D3.js - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)