Problem with raphael js

Question

Problem with raphael js

Navigation

#1 by (0 votes)

1

I have an inconvenience when attaching raphael.js.min automatically it blocks me the rest of functionalities that make other scripts like for example the pagination of my table. I have tried changing it from position but it follows the inconvenience. I would like to know if there is any other alternative that does the same thing as Raphaël but without damaging the rest of scripts .

What Raphaël does is put the blue rectangles that are shown below every time you click on any of them you should get a alert .

Code raphael:

var rsr = Raphael('map', '2725', '1717'); 

var regions = [];

var plano2 = rsr.rect(474.31512, 27.257416, 15.82637, 73.479187); 
plano2.attr({id: 'plano2', x: '398.31512', y: '23.257416', fill: '#5555ff', 'stroke-width': '0', 'stroke-opacity': '1'}).data('id', 'plano2'); 
regions.push(plano2);

var plano3 = rsr.rect(110.20976, 136.39427, 11.869713, 58.218128); 
plano3.attr({id: 'plano3', x: '90.20976', y: '136.39427', fill: '#2a2aff', 'stroke-width': '0', 'stroke-opacity': '1'}).data('id', 'plano3'); 
regions.push(plano3);

var plano1 = rsr.rect(22.591152, 25.006752, 133.39301, 19.217632); 
plano1.attr({id: 'plano1', x: '5.591152', y: '23.006752', fill: '#2a2aff', 'stroke-width': '0', 'stroke-opacity': '1'}).data('id', 'plano1');
regions.push(plano1);


for (var i = 0; i < regions.length; i++) {

    // Change Yorkshire's fill colour to gold
    if (regions[i].data('id') == 'heaven-on-earth') {
        regions[i].node.setAttribute('fill', 'gold');
    }

    // Showing off
    regions[i].mouseover(function (e) {
        this.node.style.opacity = 0.7;
        document.getElementById('region-name').innerHTML = this.data('region');
    });

    regions[i].mouseout(function (e) {
        this.node.style.opacity = 1;
    });

    regions[i].click(function (e) {
        alert("asd");
    });
}

The scripts I use:

<script src="assets/js/jquery-1.12.3.min.js"></script>  
<script src="assets/js/bootstrap.min.js"></script>

<!--Scripts tabla -->
<script src="assets/js/Table/jquery.dataTables.min.js"></script>
<script>
    $(document).ready(function () {
        $('#tablaInfoNeveras').DataTable();
    });
</script>
<script src="amcharts/amcharts.js" type="text/javascript"></script>
<script src="amcharts/serial.js" type="text/javascript"></script>
<script src="amcharts/amstock.js" type="text/javascript"></script>

javascript

asked by Lina Cortés 20.09.2016 в 20:12

source

1 answer

Error NSAttributedString when switching to Swift 3 Show Snack Bar with ScrollView

score 0 · Answer 1

If you only need to place the rectangles and detect when you click on them, you can dispense with Raphaël (this type of libraries should be used if you are going to create more complex things). You can create the SVG element and the rectangles only with Vanilla JavaScript . Here is an example:

var cont = document.getElementById("container");
var namespace = "http://www.w3.org/2000/svg";
var svg = document.createElementNS(namespace, "svg");

addAttributes(svg, {"id": "map", "width": 800, "height": 600});

addRectangle(svg, clickRectangle, {"id": "plano1", "x": 10, "y": 10, "width": 100, "height": 50, "fill": "#2a2aff", "stroke-width": 0, "stroke-opacity": 1});

addRectangle(svg, clickRectangle, {"id": "plano2", "x": 150, "y": 10, "width": 200, "height": 100, "fill": "#2a2aff", "stroke-width": 0, "stroke-opacity": 1});

cont.appendChild(svg);

function addRectangle (svg, click, attrs) {

    var rect = document.createElementNS(namespace, "rect");
    addAttributes(rect, attrs);
    svg.appendChild(rect);
    
    rect.addEventListener("click", function(){
        if (click) { click.call(null, rect.getAttribute("id")); }
    });
  
}

function addAttributes (el, attrs) {
    for (var prop in attrs) {
        el.setAttribute(prop, attrs[prop]);
    }
}

function clickRectangle (id) {
    alert(id);
}

#map {
    width: 100%;
}

#map rect:hover {
    cursor: pointer;
    opacity: 0.7;
    -moz-transition: opacity .25s ease;
    -webkit-transition: opacity .25s ease;
    transition: opacity .25s ease;
}

<div id="container"></div>