Executing action on an unselected ID

Question

Executing action on an unselected ID

Navigation

#1 by (2 votes)

1

I have several links:

<a href="javascript:void(0);" id="ZoomPath" data-ref-id-map="Layer_1" data-ref-g-id="xxx">São Paulo - São Paulo</a>
<a href="javascript:void(0);" id="ZoomPath" data-ref-id-map="Layer_1" data-ref-g-id="yyy">São Paulo - Osasco</a>


<a href="javascript:void(0);" id="ZoomPath" data-ref-id-map="Layer_2" data-ref-g-id="xxx">São Paulo - São Paulo</a>
<a href="javascript:void(0);" id="ZoomPath" data-ref-id-map="Layer_2" data-ref-g-id="yyy">São Paulo - Osasco</a>

And I have the code:

$(document).on('click', 'a#ZoomPath', function(){

      var Mapa = $(this).attr('data-ref-id-map');
      var GID  = $(this).attr('data-ref-g-id');

      clicked(GID, Mapa);

      $("g#"+GID+' > path').each(function(){

        $(this).addClass('hover-map');

      });

      $("g#"+GID+' > path').each(function(){

      $(this).fadeIn(1000).fadeOut(1000).fadeIn(1000).fadeOut(1000).fadeIn(1000).fadeOut(1000).fadeIn(1000, function(){
        $(this).removeClass('hover-map');
      });

      });

    });

function clicked(id_click, id_map) {

      var svgClicked = d3.select("svg#"+id_map);

      var bbox = d3.select("svg#"+id_map+" g#"+id_click).node().getBBox();

      var svgWidth = bbox.width;
      var svgHeight = bbox.height;

      var x = bbox.x-(280/2), //METADE DA LARGURA DO SVG /2
          y = bbox.y-(245/2); //METADE DA ALTURA DO SVG /2

      var scale = 2;

      svgClicked.transition().duration(2000)
          .call(zoom.translate([((x * -scale) + (svgWidth / 2)), ((y * -scale) + svgHeight / 2)])
          .scale(scale).event);
      }

The above code should work like this: Clicking on a link takes the data-ref-id-map and data-ref-g-id a zoom in SVG (% with%) that has a path with the ID that is in data-ref-id-map . The problem is that it just zooms in on the SVG of the Layer_1 ID. As much as I click on the link containing the Layer_2 it is giving in the other SVG (Layer_1).

I made a debug to see which ID (layer) it is passing in the function data-ref-g-map and it passes the right ID in the Layer_2

javascript d3.js

asked by anonymous 20.01.2017 / 15:31

1 answer

Middleware for post manipulation Add multiple indexes of a vector as parameter

score 2 · Answer 1

The error is in the ID repetition , you should only use an ID for each element, although it does not give an immediate error, , in case the javascript is reading the id of the first element, msm vc clicking on a later element.

I suggest you do the following:

or define an id for each click, eg:

<a href="javascript:void(0);" id="ZoomPath1" data-ref-id-map="Layer_1" data-ref-g-id="xxx">São Paulo - São Paulo</a>
<a href="javascript:void(0);" id="ZoomPath2" data-ref-id-map="Layer_1" data-ref-g-id="yyy">São Paulo - Osasco</a>


<a href="javascript:void(0);" id="ZoomPath3" data-ref-id-map="Layer_2" data-ref-g-id="xxx">São Paulo - São Paulo</a>
<a href="javascript:void(0);" id="ZoomPath4" data-ref-id-map="Layer_2" data-ref-g-id="yyy">São Paulo - Osasco</a>

or if this is very complicated due to the amount of elements, instead of dealing with id, proceed to treat by class. Ex:

<a href="javascript:void(0);" class="ZoomPath" data-ref-id-map="Layer_1" data-ref-g-id="xxx">São Paulo - São Paulo</a>
<a href="javascript:void(0);" class="ZoomPath" data-ref-id-map="Layer_1" data-ref-g-id="yyy">São Paulo - Osasco</a>


<a href="javascript:void(0);" class="ZoomPath" data-ref-id-map="Layer_2" data-ref-g-id="xxx">São Paulo - São Paulo</a>
<a href="javascript:void(0);" class="ZoomPath" data-ref-id-map="Layer_2" data-ref-g-id="yyy">São Paulo - Osasco</a>

And here, you change the # by .

$(document).on('click', 'a.ZoomPath', function(){

Upgrading

I took a look at some things, and refined your code. Take a test and tell me please.

<a href="javascript:void(0);" class="ZoomPath" data-map="Layer_1" data-g="xxx">São Paulo - São Paulo</a>
    <a href="javascript:void(0);" class="ZoomPath" data-map="Layer_1" data-g="yyy">São Paulo - Osasco</a>


    <a href="javascript:void(0);" class="ZoomPath" data-map="Layer_2" data-g="xxx">São Paulo - São Paulo</a>
    <a href="javascript:void(0);" class="ZoomPath" data-map="Layer_2" data-g="yyy">São Paulo - Osasco</a>

$(document).on('click', 'a.ZoomPath', function(){

      var Mapa = $(this).data('map');
      var GID  = $(this).data('g');

      clicked(GID, Mapa);

      $("g#"+GID+' > path').each(function(){

        $(this).addClass('hover-map');

      });

      $("g#"+GID+' > path').each(function(){

      $(this).fadeIn(1000).fadeOut(1000).fadeIn(1000).fadeOut(1000).fadeIn(1000).fadeOut(1000).fadeIn(1000, function(){
        $(this).removeClass('hover-map');
      });

      });

    });

function clicked(id_click, id_map) {

      var svgClicked = d3.select("svg#"+id_map);

      var bbox = d3.select("svg#"+id_map+" g#"+id_click).node().getBBox();

      var svgWidth = bbox.width;
      var svgHeight = bbox.height;

      var x = bbox.x-(280/2), //METADE DA LARGURA DO SVG /2
          y = bbox.y-(245/2); //METADE DA ALTURA DO SVG /2

      var scale = 2;

      svgClicked.transition().duration(2000)
          .call(zoom.translate([((x * -scale) + (svgWidth / 2)), ((y * -scale) + svgHeight / 2)])
          .scale(scale).event);
      }