根据按钮单击切换 d3 形状
[英]Toggle d3 shapes depending on button click
问题描述
我创建了一个多边形和矩形 svg，还为多边形和矩形创建了一个切换按钮，如下所示，还创建了 jfiddle。
我想要实现的是最初应该在网页上显示矩形和多边形，然后如果我点击“切换多边形”，应该显示多边形并且应该隐藏矩形，如果我点击“切换矩形”应该显示矩形并隐藏多边形。
我编写了下面的代码来实现这一点，但由于某种原因，矩形和多边形都没有首先显示在一起，而且切换按钮甚至没有显示正确的形状，即使我为两者提供了不同的函数名称。
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="http://d3js.org/d3.v3.js"></script>
<button onclick="myfunc" >Toggle polygon</button>
<button onclick="func">toggle rect</button>
</body>
...
...
var vis = d3.select("body").append("svg")
.attr("width", 1000)
.attr("height", 667),
scaleX = d3.scale.linear()
.domain([-30,30])
.range([0,600]),
scaleY = d3.scale.linear()
.domain([0,50])
.range([500,0]),
poly = [{"x":0.0, "y":25.0},
{"x":8.5,"y":23.4},
{"x":13.0,"y":21.0},
{"x":19.0,"y":15.5}];
var path;
d3.select('button').on('click', function myfunc() {
if ( path ) {
path.remove();
// Remove dots
path = null;
} else {
path=vis.select("polygon")
.data([poly])
.enter().append("polygon")
.attr("points",function(d) {
return d.map(function(d) { return [scaleX(d.x),scaleY(d.y)].join(","); }).join(" ");})
.attr("stroke","black")
.attr("stroke-width",2);
}
});
var rect;
d3.select('button').on('click', function func() {
if ( rect ) {
rect.remove();
// Remove dots
rect= null;
} else {
rect = vis
.append("rect")
.attr("x", 165)
.attr("y", 25)
.attr("height", 100)
.attr("width", 100)
.attr("fill", "#420a91")
.attr("stroke", "#FF00FF")
.attr("stroke-width", "4")
.attr("stroke-dasharray", "10,10");
}
});
...
1 个解决方案
解决方案1
1 已采纳 2022-06-17 03:52:07
当你这样做...
d3.select('button').on('click',
...您正在选择第一个按钮并为同一个按钮设置不同的侦听器（最后一个覆盖第一个）。
解决方案是删除selection.on并依赖内联的onclick事件，或者为这些按钮提供不同的 ID。 另外，请记住selection.data()遵循selectAll 。
这是您进行这些更改的代码：
var vis = d3.select("body").append("svg") .attr("width", 1000) .attr("height", 667), scaleX = d3.scale.linear() .domain([-30, 30]) .range([0, 600]), scaleY = d3.scale.linear() .domain([0, 50]) .range([500, 0]), poly = [{ "x": 0.0, "y": 25.0 }, { "x": 8.5, "y": 23.4 }, { "x": 13.0, "y": 21.0 }, { "x": 19.0, "y": 15.5 } ]; var path; d3.select('#btn1').on('click', function myfunc() { if (path) { path.remove(); // Remove dots path = null; } else { path = vis.selectAll("polygon") .data([poly]) .enter().append("polygon") .attr("points", function(d) { return d.map(function(d) { return [scaleX(dx), scaleY(dy)].join(","); }).join(" "); }) .attr("stroke", "black") .attr("stroke-width", 2); } }); var rect; d3.select('#btn2').on('click', function func() { if (rect) { rect.remove(); // Remove dots rect = null; } else { rect = vis .append("rect") .attr("x", 165) .attr("y", 25) .attr("height", 100) .attr("width", 100) .attr("fill", "#420a91") .attr("stroke", "#FF00FF") .attr("stroke-width", "4") .attr("stroke-dasharray", "10,10"); } });
<!DOCTYPE html> <meta charset="utf-8"> <body> <script src="http://d3js.org/d3.v3.js"></script> <button id="btn1">Toggle polygon</button> <button id="btn2">toggle rect</button> </body>
D3 on(“点击”, 切换
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.