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>