亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

D3.js - .on(鼠標懸停)不檢索數據(地圖上的強制定向布局(leaflet.js))

D3.js - .on(鼠標懸停)不檢索數據(地圖上的強制定向布局(leaflet.js))

吃雞游戲 2024-01-03 17:15:20
我正在通過地圖 ( leaflet.js) 建立網絡,其中有兩種不同類型的圈子(私有域和公共域)。我可以在地圖中顯示我的links和我的nodes(nodes實體類型(私人或公共)以及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,數據就是看不到。我嘗試了一切可能的方法,我嘗試將函數放入.on("mouseover", function(...){...}),隨機嘗試中,但似乎沒有任何效果。提醒一下,我只有 2 周的時間d3.js,所以我仍然是一個嘗試學習文檔的菜鳥。我覺得奇怪的是,另一個functions正在工作并通過data,但當我指的是該mouseover功能時,它不起作用。我將提供所有代碼以供進一步分析,因為問題可能出在其他地方。
查看完整描述

1 回答

?
慕姐4208626

TA貢獻1852條經驗 獲得超7個贊

我們要做的就是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。


查看完整回答
反對 回復 2024-01-03
  • 1 回答
  • 0 關注
  • 181 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號