0

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

        })
4

1 回答 1

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

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

于 2020-05-11T23:03:54.547 回答