Toggle d3 shapes depending on button click-CodePudding

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.

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/

CodePudding user response：

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. Also, remember that selection.data() follows 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(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>