Удаление общего текста из всплывающей подсказки d3plus - PullRequest
Новая
       28

Удаление общего текста из всплывающей подсказки d3plus

0 голосов
/ 06 мая 2020

Как я могу удалить текст общего доступа, который появляется во всплывающей подсказке d3plus. Я хочу, чтобы кнопка «Поделиться» была удалена из всплывающей подсказки. Для меня это совершенно бессмысленно, есть ли способ удалить его из всплывающей подсказки. Ниже мой существующий код. 

        new d3plus.Treemap()
        .select("#viz")
        .data(data)
        .groupBy("id")
        .on("click", function (d) {
            bootbox.alert({
                title: d.id,
                message: "<table class='tooltip-table'>"
                    + "<tr><td class='title'> Number of Businesses</td><td class='data'>" + d.numberpercategory + "</td></tr>"
                    + "<tr><td class='title'> Number of Sub Categories</td><td class='data'>" + d.numberpersubcategory + "</td></tr>"
                    + "<tr><td class='title'> Revenue Generated</td><td class='data'>" + 'N' + parseFloat(d.value) + "</td></tr>"
                    + "</table>",

                callback: function (result) {
                    console.log('Error is: ' + result);
                }
            }).find('.modal-content').css({
                'background-color': '#212831',
                'color': 'white',
                'font-size': '1em',
                'margin-top': function () {
                    var w = $(window).height();
                    var b = $(".modal-dialog").height();
                    // should not be (w-h)/2
                    var h = (w - b) / 2;
                    return h + "px";
                }
            });
        })
        .tooltipConfig({
            body: function (d) {
                var table = "<table class='tooltip-table'>";
                table += "<tr><td class='title'> Number of Businesses</td><td class='data'>" + d.numberpercategory + "</td></tr>";
                table += "<tr><td class='title'> Number of Sub Categories</td><td class='data'>" + d.numberpersubcategory + "</td></tr>";
                table += "<tr><td class='title'> Revenue Generated</td><td class='data'>" + d.percent+'%'+ "</td></tr>";

                table += "</table>";
                return table;
            },
            footer: function (d) {
                return "<sub class='tooltip-footer'>d.id</sub>";
            },
            title: function (d) {
                var txt = d.id;
                return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
                ;
            },

        })

1 Ответ

1 голос
/ 12 мая 2020

Попробуйте добавить tbody к tooltipConfig следующим образом: 

.tooltipConfig({
    body: function (d) {
            var table = "<table class='tooltip-table'>";
            table += "<tr><td class='title'> Number of Businesses</td><td class='data'>" + d.numberpercategory + "</td></tr>";
            table += "<tr><td class='title'> Number of Sub Categories</td><td class='data'>" + d.numberpersubcategory + "</td></tr>";
            table += "<tr><td class='title'> Revenue Generated</td><td class='data'>" + d.percent+'%'+ "</td></tr>";

            table += "</table>";
            return table;
        },
    footer: function (d) {
        return "<sub class='tooltip-footer'>d.id</sub>";
    },
    tbody: function(d) {
        const table = [];
        return table;
    },
    title: function (d) {
        var txt = d.id;
        return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
    }
})

Метод tbody позволяет вам перезаписать конфигурацию всплывающей подсказки по умолчанию для d3plus. Вы также можете использовать метод tbody, чтобы упростить создание всплывающих подсказок. В вашем случае вы можете установить tbody следующим образом: 

.tooltipConfig({
    footer: function (d) {
        return "<sub class='tooltip-footer'>d.id</sub>";
    },
    tbody: function(d) {
        const table = [
            ["Number of Businesses", d.numberpercategory],
            ["Number of Sub Categories", d.numberpersubcategory],
            ["Revenue Generated", `${d.percent}%`]
        ];
        return table;
    },
    title: function (d) {
        var txt = d.id;
        return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
    }
})

Это перезапишет конфигурацию всплывающей подсказки по умолчанию и создаст ту же всплывающую подсказку, которую вы использовали.

...