D3.js按钮点击切换SVG多边形与矩形显隐异常问题

现存代码问题 #

• 事件绑定逻辑错误：d3.select('button')仅匹配DOM中第一个按钮元素，第二次调用该方法绑定click事件会覆盖第一次绑定的回调，导致两个按钮无法分别响应逻辑；HTML中内联写的onclick属性未给函数加执行括号、对应函数也未挂载到全局作用域，本身无法触发。
• 缺少初始渲染逻辑：代码仅在点击事件分支中编写了图形创建代码，页面首次加载时不会执行图形渲染，初始状态下无法同时展示两类图形。
• 切换逻辑不符合需求：现有逻辑仅处理单个图形的删除/创建，未做两类图形的互斥显隐控制，无法实现点击按钮后仅展示单类图形的效果。

修复思路 #

• 给两个按钮添加独立id，精准绑定事件，避免事件覆盖问题
• 页面初始化时直接渲染多边形、矩形两类图形，保存图形元素引用，满足初始同时展示的要求
• 切换时通过CSS display 属性控制显隐，不需要反复删除、重建DOM，逻辑更简洁性能更好：点击对应按钮时将目标图形设为显示、另一类图形设为隐藏即可。

可直接运行的修复后代码 #

<!DOCTYPE html>
<meta charset="utf-8">
<body>
  <script src="http://d3js.org/d3.v3.js"></script>
  <button id="togglePoly">Toggle polygon</button>
  <button id="toggleRect">toggle rect</button>

  <script>
    var vis = d3.select("body").append("svg")
      .attr("width", 1000)
      .attr("height", 667);

    var scaleX = d3.scale.linear()
      .domain([-30,30])
      .range([0,600]);

    var scaleY = d3.scale.linear()
      .domain([0,50])
      .range([500,0]);

    var 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 polygon = vis.append("polygon")
      .attr("points",function() { 
        return poly.map(function(item) { 
          return [scaleX(item.x),scaleY(item.y)].join(","); 
        }).join(" ");
      })
      .attr("stroke","black")
      .attr("stroke-width",2)
      .attr("fill", "none");

    // 初始渲染矩形
    var 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");

    // 绑定多边形切换按钮事件
    d3.select('#togglePoly').on('click', function() {
      polygon.style("display", "block");
      rect.style("display", "none");
    });

    // 绑定矩形切换按钮事件
    d3.select('#toggleRect').on('click', function() {
      rect.style("display", "block");
      polygon.style("display", "none");
    });
  </script>
</body>

如果需要扩展“再次点击同一按钮切回两类图形同时显示”的能力，只需要在事件处理函数中增加对应display状态的判断分支即可，当前代码严格匹配提出的三点预期效果。

内容的提问来源于stack exchange，提问作者anonym