从 d3plus 工具提示中删除共享文本

Question

如何删除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();
                ;
            },

        })

Answer 1

尝试将 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();
    }
})

这将覆盖默认的工具提示配置并构建与您使用的相同的工具提示。

从 d3plus 工具提示中删除共享文本

Removing share text from d3plus tooltip

d3.js

d3plus