D3互動H-酒吧

Question

我使用這個代碼

d3.select("body").selectAll("div.h-bar").on("click", function(){ 
    d3.select(this).style("width", function() { 
     return (d3.mouse(this)[0])+"px"; 
    }) 
    .select("span") 
    .text(function (d) { 
     return (Math.round(d3.mouse(this)[0]/10)/10); 
    });  
}) 

的交互方式更改任何H-欄點擊，用鼠標的寬度和它工作正常，但只減少寬度.. 這可能是一個焦點問題...你有想法增加寬度嗎？

Answer 1

問題是，在縮小h-bar的寬度後，點擊div外部不會觸發div的點擊。因此，您必須將偵聽器綁定到h-bar div的外部容器。

希望這會有所幫助。如果仍有問題，請分享更多代碼。

d3.select("body").on("click", function() { 
 
    d3.select(this).select(".h-bar").style("width", function() { 
 
     return (d3.mouse(this)[0]) + "px"; 
 
    }) 
 
    .select("span") 
 
    .text(function(d) { 
 
     return (Math.round(d3.mouse(this)[0]/10)/10); 
 
    }); 
 
})

.h-bar { 
 
    width: 100px; 
 
    height: 15px; 
 
    background: black; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 

 
<div class="h-bar"></div>