Tengo un svg de polígono y rectángulo creado y también creé un botón de alternar para un polígono y un rectángulo como se muestra a continuación y jfiddle también.
Lo que estoy tratando de lograr es que tanto el rectángulo como el polígono se muestren inicialmente en la página web, luego, si hago clic en "alternar polígono", el polígono debe mostrarse y el rectángulo debe ocultarse, y si hago clic en "alternar rect" el rectángulo debe mostrarse y el polígono debe estar oculto.
Escribí el código a continuación para lograrlo, pero por alguna razón, tanto el rectángulo como el polígono no se muestran primero juntos y los botones de alternar ni siquiera muestran la forma adecuada a pesar de que proporcioné diferentes nombres de función para ambos.
<!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(dx),scaleY(dy)].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"); } });...
Cuando tu lo hagas...
d3.select('button').on('click',... está seleccionando el primer botón y configurando un oyente diferente para ese mismo botón (el último anula al primero).
La solución es soltar la selection.on y confiar en el evento onclick en línea o, alternativamente, dar a esos botones ID diferentes. Además, recuerda que selection.data() sigue selectAll .
Aquí está su código con esos cambios:
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>