Подсказка подсказки не прикрепляется к элементу D3

На самом деле у меня это работало несколько дней назад, но что-то должно быть изменилось, так как теперь оно не работает должным образом. Всплывающая подсказка отображается при наведении курсора на соответствующий элемент, но всегда в верхнем левом углу экрана. Когда я использую «проверить элемент» в окне браузера, я вижу, что стиль подсказки всегда установлен на top: 0px; left: 0px, что говорит о том, что он не вычисляет новые значения для позиции.

Здесь показано создание элементов, к которым я пытаюсь прикрепить всплывающую подсказку (кружки разного размера на пузырьковой диаграмме), а также инициализацию подсыпки:

function d3bubbles(dataset) {

    var diameter = 960;

    // create new pack layout set to variable 'bubble'
    var bubble = d3.layout.pack()
                          // no sorting, size allocated 960x960
                          .sort(null)
                          .size([diameter, diameter])

    var canvas = d3.select("#mainBlock").append("svg")
                               .attr("width", diameter)
                               .attr("height", diameter)
                               .append("g")

    d3.json("cleanJson.json", function (data) {

        // run pack layout specified above returning array of nodes
        // associated with 'data' from JSON file
        // outputs array with computed position of all nodes as 'nodes'
        // and populates some data for each node:
        // depth, starting at 0 for root, x coordinate of node,
        // y coordinate of node, radius r of node

        var nodes = bubble.nodes(data);

        var node = canvas.selectAll(".node")
                         .data(nodes)
                         .enter()
                         // standard html element to display svg
                         .append("g")
                         .attr("class", "node")
                         .attr("transform", function (d) {
                             return "translate(" + d.x + ", " + d.y + ")";
                         });

        node.append("circle")
            // radius from data
            .attr("r", function (d) {
                return d.r;
            })
            // set stroke for circles but only on leaf nodes
            .attr("stroke", function (d) {
                return d.children ? "": "#f4efdd";
            })
            .attr("stroke-width", 10);

        // tooltip
        $('svg circle').tipsy( { 
            gravity: 'w',
            fade: true,
            html: true, 
            title: function() {
                var d = this.__data__;
                return d.children ? "" : d.value + " Manuscripts"; 
            }
        })
    });
};

#mainBlock относится к идентификатору section в моем html. Когда я запускаю это и наводю курсор на кружки данных на пузырьковой диаграмме, всплывающие подсказки появляются, но все они находятся в верхнем левом углу экрана. Может ли кто-нибудь заметить здесь что-нибудь не так, что могло бы вызвать эту ошибку?


person John Dawson    schedule 30.07.2014    source источник


Ответы (2)


К сожалению, навеселе было создано гораздо больше, прежде чем графика SVG стала доступной. Если вам нужно использовать навеселе, вам могут потребоваться некоторые настройки jQuery, например, следующие:

  jQuery('svg g.node').mousemove(function( event ) {
       // 
       jQuery('.tipsy').css('left',(event.pageX+16)+'px');
       jQuery('.tipsy').css('top',(event.pageY-16)+'px');
  })
person tolginho    schedule 24.01.2017

Ваша версия d3 слишком нова, чтобы ее можно было поддерживать. Для d3.js v6 проверьте d3-v6-tip. https://www.npmjs.com/package/d3-v6-tip

person 4fterlook    schedule 13.01.2021