根据按钮单击切换 d3 形状
[英]Toggle d3 shapes depending on button click
问题描述
I have a polygon and rectangle svg created and I also created a toggle button for a polygon and a rectangle as shown below and jfiddle as well.
我创建了一个多边形和矩形 svg，还为多边形和矩形创建了一个切换按钮，如下所示，还创建了 jfiddle。
What I am trying to achieve is initially both the rectangle and polygon should be displayed on the webpage, then if I click on "toggle polygon" the polygon should be shown and the rectangle should be hidden, and if I click on "toggle rect" the rectangle should be shown and polygon should be hidden.我想要实现的是最初应该在网页上显示矩形和多边形，然后如果我点击“切换多边形”，应该显示多边形并且应该隐藏矩形，如果我点击“切换矩形”应该显示矩形并隐藏多边形。
I wrote the code below to achieve that but for some reason,both rectangle and polygon arent displayed first together and also the toggle buttons aren't even displaying proper shape even though I provided different function names to both.我编写了下面的代码来实现这一点，但由于某种原因，矩形和多边形都没有首先显示在一起，而且切换按钮甚至没有显示正确的形状，即使我为两者提供了不同的函数名称。
<!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");
}
});
... ...
http://jsfiddle.net/e2juf7op/1/ http://jsfiddle.net/e2juf7op/1/
1 个解决方案
解决方案1
1 已采纳 2022-06-17 03:52:07
When you do...当你这样做...
d3.select('button').on('click',
... you are selecting the first button and setting a different listener to that same button (the last one overrides the first one). ...您正在选择第一个按钮并为同一个按钮设置不同的侦听器（最后一个覆盖第一个）。
The solution is either dropping the selection.on and relying on the inline onclick event or, alternatively, give those buttons different IDs.解决方案是删除selection.on并依赖内联的onclick事件，或者为这些按钮提供不同的 ID。 Also, remember that selection.data() follows selectAll .另外，请记住selection.data()遵循selectAll 。
Here is your code with those changes:这是您进行这些更改的代码：
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.