Question

我有一个按钮，可以在图表上绘制一条线和一些点。我有第二个按钮，删除线和点。我正在尝试对两个函数使用相同的按钮。

我有点困难。有没有人见过这样的事情？

这是我的两个功能。提前谢谢！

 //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();

     });

});

首先，我尝试在每次点击事件中来回传递按钮类，它适用于绘图和删除。但只有一次，所以我无法画线和第二次。

Answer 1

您可以将path变量移到事件处理程序之外：

<!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>

切换D3.js的按钮

1 个答案: