Question

这是fiddle。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Chat</title>
    <script type="text/javascript" src="{{ url_for('static', filename='jquery-2.2.0.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='socket.io.min.js') }}"></script>
</head>
<body>

<script type="text/javascript" charset="utf-8">

     $(document).ready(function() {

         var socket = io.connect('http://' + document.domain + ':' + location.port);

         socket.emit('connect', {data: 'U connected'});

         socket.on('apply', function (e) {
            console.log('it works');
                $('#log').append('<br>' + e.data + '<br>')

        });

     });

</script>

<h1 id="log"></h1>
</body>
</html>

我正在使用d3.event.pageX和pageY来获取鼠标的当前位置，但工具提示仍然没有附加到鼠标。

Answer 1

在您的css规则charts.bar div:hover中，您有zoom:150%;行。这会使你的工具提示的位置膨胀50％，所以你越往右移动就越糟糕;当你删除它时，工具提示会变得更好。（你也可以尝试像d3.tip（http://bl.ocks.org/Caged/6476579）这样的东西，而不是自己动手。）

D3工具提示脱离图表

1 个答案: