D3. js - .on (при наведении курсора мыши) не извлекает данные (принудительное расположение на карте (буклет. js))

Question

Я делаю сеть по карте (leaflet.js), где у меня есть 2 различных типа кругов (приватные домены и публичные домены). Я могу показать на карте как мои links, так и мои nodes (nodes - это тип сущности (private или publi c), а links - контракты, которые они заключают друг с другом.

К сожалению, я столкнулся с проблемой при попытке применить эффект .on("mouseover") к своим кругам. Следующий код показывает, что я делаю именно с этим эффектом.

var circle = g.selectAll("circle")
    .data(nodes)
    .enter()
    .append("circle")
    .attr("cx", function(d){ return map.latLngToLayerPoint([d.lat, d.long]).x })        
    .attr("cy", function(d){ return map.latLngToLayerPoint([d.lat, d.long]).y })
    .attr("r", function(d,i)
        {                
        if(d.numContr >= 50)                            {return 20;}
        else{
            if(d.numContr <50 && d.numContr >= 25)      {return 16;}
            else{
                if(d.numContr <25 && d.numContr >= 10)  {return 12;}
                else                                    {return 8; }
                }           
            }
        })
    .attr("fill", function (d, i)
        {
        if(d.private == 1)      { return "rgb(8,105,114)" }
        else                    { return "rgb(167,255,131)"}
        })
    .attr("stroke","rgb(7,26,82)")
    .attr("stroke-width", 6) 
    .on("mouseover", mouseover)
    .on("mouseout", mouseout)  

function mouseover - это следующее:

    function mouseover(d, i, n)
{
    console.log(d3.select(n[i])
    d3.select(n[i])
    .transition()
    .duration(100)
    .attr("opacity",0.7)
}

Проблема, с которой я сейчас сталкиваюсь, заключается в том, что я даже не вижу данные, когда я console.log(), независимо от того, какие атрибуты я пытаюсь увидеть, или какие значения я отправляю в log, данные просто не go в. Я перепробовал все, что мог, я пытался поместить функцию в .on("mouseover", function(...){...}), случайные попытки, но ничего не получается. Напоминание, что у меня только 2 недели d3.js так что я все еще ладья ie пытаюсь изучить документацию. Мне кажется странным, что другие functions работают и передают data, но когда я ссылаюсь на функцию mouseover, она не не работает.

Я предоставлю весь свой код для дальнейшего анализа, потому что проблема может быть где-то еще.

// $(document).ready(function()
document.addEventListener("DOMContentLoaded", function(e)
{
    $("#mapid").height(window.innerHeight);
    // $('#slide-in').height(window.innerHeight);
    // $(document).on('click', '#advanced', function()
    // {
    //     if($('#slide-in').hasClass('in'))
    //         { $('#slide-in').removeClass('in') }
    //     else
    //         { $('#slide-in').addClass('in') }
    // });





//\\Introduzir mapa____________________________________________________________________________________________________
    var map = L.map('mapid').setView([41.4079700, -8.5197800], 12)
            
	L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
		maxZoom: 18,
		attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
			'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
			'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
		id: 'mapbox/streets-v10',
		tileSize: 512,
        zoomOffset: -1, 
	}).addTo(map);

    map.zoomControl.remove();
    L.control.zoom({
        position: 'bottomright',
    }).addTo(map);

    // Add a svg layer to the map
    L.svg().addTo(map);

    /* We simply pick up the SVG from the map object */
    var svg = d3.select("#mapid").select("svg"),
        g = svg.append("g");
//\\___________________________________________________________________________________________________________________


//\\dados provisórios__________________________________________________________________________________________________
var nodes = [
    {lat: 41.4579700, long:  -8.5297800,  private: 2, numContr: 10}, 
    {lat: 41.4379700, long:  -8.5297800,  private: 2, numContr: 20}, 
    {lat: 41.4579700, long:  -8.4897800,  private: 1, numContr: 40}, 
    {lat: 41.4179700, long:  -8.4597800,  private: 1, numContr: 50}, 
    {lat: 41.3879700, long:  -8.5997800,  private: 2, numContr: 10}, 
    {lat: 41.4779700, long:  -8.5097800,  private: 1, numContr: 30}, 
    ];

var links = [
    {source: nodes[0], target: nodes[1],  fraude: 1},
    {source: nodes[2], target: nodes[1],  fraude: 2},
    {source: nodes[0], target: nodes[5],  fraude: 2},
    {source: nodes[0], target: nodes[2],  fraude: 1},
    {source: nodes[4], target: nodes[1],  fraude: 1},
    {source: nodes[4], target: nodes[2],  fraude: 2},
    {source: nodes[2], target: nodes[3],  fraude: 1}
    ];
//\\___________________________________________________________________________________________________________________


//\\teste json (puxar valores dos links)_______________________________________________________________________________

// d3.json("/data_json/new.json")
//     .then(data =>
//         {       
//             // console.log(data)
//             // console.log(data.links[0].NomeEntidadeAdjudicataria)
//             // console.log(data.links[4].NifEntidadeAdjuticataria)
//         })
//\\___________________________________________________________________________________________________________________


//\\Adicionar Tooltip para os LINKS____________________________________________________________________________________










//\\___________________________________________________________________________________________________________________


//\\Adicionar Tooltip para os NODES____________________________________________________________________________________







//\\___________________________________________________________________________________________________________________


//\\Adicionar Legenda "Numero de Contratos Realizados"_________________________________________________________________










//\\___________________________________________________________________________________________________________________


//\\Adicionar Legenda "Tipo de Contratos"______________________________________________________________________________










//\\___________________________________________________________________________________________________________________


//\\Adicionar Legenda "Tipo de Entidades"______________________________________________________________________________










//\\___________________________________________________________________________________________________________________


//\\Adicionar os links_________________________________________________________________________________________________
   var line = g.selectAll("line")
        .data(links)    
        .enter()
        .append("line")
        .attr("x1", function(d) { return map.latLngToLayerPoint([d.source.lat, d.source.long]).x})
        .attr("y1", function(d) { return map.latLngToLayerPoint([d.source.lat, d.source.long]).y})
        .attr("x2", function(d) { return map.latLngToLayerPoint([d.target.lat, d.target.long]).x})
        .attr("y2", function(d) { return map.latLngToLayerPoint([d.target.lat, d.target.long]).y})
        .style("stroke", function(d, i)
        {
            if(d.fraude == 2)       { return "rgb(197,53,53)"}
            else                    { return "rgb(96,211,62"}        
        })
        .style("stroke-width", 5)                 
//\\___________________________________________________________________________________________________________________


//\\Adicionar os nodes_________________________________________________________________________________________________
    var circle = g.selectAll("circle")
        .data(nodes)
        .enter()
        .append("circle")
        .attr("cx", function(d){ return map.latLngToLayerPoint([d.lat, d.long]).x })        
        .attr("cy", function(d){ return map.latLngToLayerPoint([d.lat, d.long]).y })
        .attr("r", function(d,i)
            {                
            if(d.numContr >= 50)                            {return 20;}
            else{
                if(d.numContr <50 && d.numContr >= 25)      {return 16;}
                else{
                    if(d.numContr <25 && d.numContr >= 10)  {return 12;}
                    else                                    {return 8; }
                    }           
                }
            })
        .attr("fill", function (d, i)
            {
            if(d.private == 1)      { return "rgb(8,105,114)" }
            else                    { return "rgb(167,255,131)"}
            })
        .attr("stroke","rgb(7,26,82)")
        .attr("stroke-width", 6) 
        .on("mouseover", mouseover)
        .on("mouseout", mouseout)            
//\\___________________________________________________________________________________________________________________


//\\Função para dar updade à posição dos circulos caso algo mude_______________________________________________________
    function update() {
        d3.selectAll("circle") //Tudo isto é para quando fizer zoom não crescer.
            .attr("cx", function(d){ return map.latLngToLayerPoint([d.lat, d.long]).x })
            .attr("cy", function(d){ return map.latLngToLayerPoint([d.lat, d.long]).y })
            .attr("r",function(d,i) 
            {if(d.numContr >= 50)       
                {return 10/3400*Math.pow(2,map.getZoom());}
                else{
                    if(d.numContr <50 && d.numContr > 25)
                    {return 8/3400*Math.pow(2,map.getZoom());}
                    else
                    {
                        if(d.numContr <25 && d.numContr > 10)
                        {return 6/3400*Math.pow(2,map.getZoom());}
                        else
                        {return 4/3400*Math.pow(2,map.getZoom());}
                    }           
                }
            })
            .attr("stroke-width", 1/6400*Math.pow(2,map.getZoom())) 
            .on("mouseover", mouseover)
            .on("mouseout", mouseout)
            

        
        //update linhas
        d3.selectAll("line")
            .attr("x1", function(d) { return map.latLngToLayerPoint([d.source.lat, d.source.long]).x})
            .attr("y1", function(d) { return map.latLngToLayerPoint([d.source.lat, d.source.long]).y})
            .attr("x2", function(d) { return map.latLngToLayerPoint([d.target.lat, d.target.long]).x})
            .attr("y2", function(d) { return map.latLngToLayerPoint([d.target.lat, d.target.long]).y})
            .style("stroke-width", 4/6400*Math.pow(2,map.getZoom())) 
    }
    map.on("viewreset", update);
    update();
    // If the user change the map (zoom or drag), it update circle position:
    map.on("moveend", update);
    update();
//\\___________________________________________________________________________________________________________________


function mouseover(d, i, n)
{
    console.log(d3.select(n[i]));
    
    d3.select(n[i])
    .transition()
    .duration(100)
    .attr("opacity",0.7)
}

function mouseout(d, i, n)
{
    d3.select(d3.select(n[i]))
    .transition()
    .duration(100)
    .attr("opacity",1)
}
})

body 
{ 
    margin: 0; padding: 0; 
}

#mapid
{
    z-index: 1;
}

g
{
    z-index: 2;
}

#menu-pesquisa
{
    position: absolute;
    z-index: 2;
    width: 324px;
    height: 24px;
    background:#fff;
    left: 0;
    margin: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2), 
                0 -1px 0px rgba(0,0,0,0.02);
    min-height: relative ;
    border-bottom: 0px solid transparent;
    padding: 5px 0px 20px 30px;
    text-align: center; 
}

#slide-id h2{
    margin: 0;
    padding: 0;
    margin-bottom: 10px;
}

#slide-in {
    padding: 10px;
    position: absolute;
    width: 250px;
    z-index: 2;
    background: white;
    margin-left: -270px;
    transition: 0.5s;
}
#slide-in.in {
    margin-left: 0px;
}

#input-pesquisa
{
    padding: 10px;
    font-size: 15px;
    border: 0;
    float: left;
    width: 65%;
    background: transparent;
    outline:none;
    margin-top: 2px;
    
}

#input-pesquisa::placeholder
{
    opacity:0.6;
    font-family: Arial, Helvetica, sans-serif;
    
}

#Pesquisa
{
    box-sizing: border-box;
    border-style: hidden;
    background-color: inherit;
    text-align: justify;
    padding:12px;
    padding-left: 30px;
    padding-right: 30px;
    outline:none;
    margin-top: -4px;
}
 #Pesquisa .icon
{
    background: url(/images/magnifying-glass.svg) no-repeat;
    float: left;
    width: 24px;
    height: 24px;
    color: white;
    border-left: none;
    cursor: pointer;
    border-color: transparent;   
    position: center;
}


#numero-contrato
{
    position: absolute;
    z-index: 2;
    width: 280px;
    height: 80px;
    background:#fff;
    padding: 5px;
    left: 0;
    bottom: 15px;
    margin: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2), 
                0 -1px 0px rgba(0,0,0,0.02);
    text-align: initial; 
}

#numero-contrato h5
{
    padding: 0;
    margin-left: 5px;
    margin-top: 0px;
    font-family: Arial, Helvetica, sans-serif;
}


#tipo-contrato
{
    position: absolute;
    z-index: 2;
    width: 160px;
    height: 80px;
    background:#fff;
    padding: 5px;
    right: 230px;
    bottom: 15px;
    margin: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2), 
                0 -1px 0px rgba(0,0,0,0.02);
    text-align: initial; 
}

#tipo-contrato h5
{
    padding: 0;
    margin-left: 5px;
    margin-top: 0px;
    font-family: Arial, Helvetica, sans-serif;
}

#tipo-entidades
{
    position: absolute;
    z-index: 2;
    width: 160px;
    height: 80px;
    background:#fff;
    padding: 5px;
    right: 40px;
    bottom: 15px;
    margin: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2), 
                0 -1px 0px rgba(0,0,0,0.02);
    text-align: initial; 
}

#tipo-entidades h5
{
    padding: 0;
    margin-left: 5px;
    margin-top: 0px;
    font-family: Arial, Helvetica, sans-serif;
}

div.tooltip{
    position: absolute;
    z-index: 2;
    background: rgba(0,153,76,0.8);
    width:130px;
    height:20px;
    color:white;
    font-size: 14px;
    padding:5px;
    top:-150px;
    left:-150px;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light",
    "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
   }
   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <link rel="stylesheet" href="/styles/styles.css">
    <link rel="stylesheet" href="/images/magnifying-glass.svg">
    <!-- Mapa -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
    <!-- <a href="file:///C:\Users\guilh\Desktop\fraud-detection-pp\gpalumbo\fraud_detection_frontend\data_json\new.json"></a> -->

    <title>Fraud Detection</title>
    
</head>
<body>
    <!-- <div id="tooltip"></div>
    
    <div id="slide-in">
        <h2>More info</h2>
    </div>

    <div id="tipo-entidades">
        <h5>Tipos de Entidades:</p>
    </div>

    <div id="tipo-contrato">
        <h5>Tipos de Contratos:</p>
    </div>

    <div id="numero-contrato">
        <h5>Número de contratos realizados:</p>
    </div> -->

    <div id="menu-pesquisa">
        <input type="text" id="input-pesquisa" placeholder="Pesquisar informações" name="Pesquisa"></input>
        <button id="Pesquisa"><span class="icon"></span></button>
   
    </div>
    <div>
        <!-- <button id="advanced" class="icon">Pesquisa Avançada</button> -->
    </div>

    <div id="mapid" style="width: 100%;"></div>
</body>

<script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>

<script src="/scripts/force_directed_layout.js"></script>

</html>

Answer 1

После поиска в stackoverflow я обнаружил другую, но похожую проблему, с которой столкнулся человек. Это ссылка на проблему: Захват мыши в d3 на листовой карте

Итак, чтобы исправить его или мою проблему, нам нужно было добавить attribute к круги под названием "pointer-events" и установите его на visible. Вот результат:

.attr("pointer-events","visible")

Затем я столкнулся с меньшей проблемой при вызове функций mouseover и mouseout, поэтому я просто написал это на событиях при наведении курсора, как это, и это сработало:

.on("mouseover",function (d, i, n)
            {
                d3.select(n[i])
                .transition()
                .duration(100)
                .attr("opacity",0.7)
            })
    .on("mouseout",function (d, i, n)
    {
        d3.select(n[i])
        .transition()
        .duration(100)
        .attr("opacity",1)
    })     

То же самое сделал с function update.