我創建了一個多邊形和矩形 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");
}
});
...
http://jsfiddle.net/e2juf7op/1/
uj5u.com熱心網友回復：
當你這樣做...
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(d.x), scaleY(d.y)].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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/492506.html
標籤：javascript html svg d3.js
上一篇：XPath到SVG元素？