javascript D3.js 的切换按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14221359/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Toggle button for D3.js
提问by Daft
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.
起初我尝试在每个点击事件上来回传递按钮的类，它适用于绘制和删除。但只有一次，所以我无法画线和第二次。
回答by MikeM
You could move the pathvariable outside the event-handler:
您可以将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>
