使用D3/SVG的语义UI弹出

Question

我目前正在用D3制作图表，UI框架是语义UI。我遇到的问题是我似乎不能让弹出窗口与SVG元素一起工作。

如下所示：

            points.append("circle")
            .attr("class", "point")
            .attr("r", 3)
            .attr("cx", function (d) { return x(d.key) + x.bandwidth() / 2; })
            .attr("cy", function (d) {
                if (d != undefined) {
                    if (d.value.ExcludedCount <= 0) {
                        return y(d.value.Average);
                    }
                    else if (d.value.Average <= (minVal - padding)) {
                        return (y(minVal - padding));
                    }
                    else if (d.value.Average >= (maxVal + padding)) {
                        return (y(maxVal + padding));
                    }
                    else {
                        return y(d.value.Average);
                    }
                }
            })
            .style('fill', function (d) {
                //return "grey";
                if (d.value.ExcludedCount >= d.value.data.length) {
                    return "grey";
                }
                else if (d.value.Failures <= 0) {
                    return PassFillScale(JSON.stringify(this.parentNode.__data__.ObjKey));
                    //return "#c6efce";
                }
                else {
                    return FailedFillScale(JSON.stringify(this.parentNode.__data__.ObjKey));
                    //return "#ffc7ce";
                }
            })
            .style("stroke", function (d) {
                //return "black";
                if (d.value.ExcludedCount >= d.value.data.length) {
                    return "black";
                }
                else if (d.value.Failures <= 0) {
                    //return "#006100"
                    return PassBorderScale(JSON.stringify(this.parentNode.__data__.ObjKey));
                }
                else {
                    return FailedBorderScale(JSON.stringify(this.parentNode.__data__.ObjKey));
                    //return "#9c0006";
                }
            }).attr('data-tooltip', "Text Goes Here")
            .attr('data-position', "top left");

我尝试通过以下方式绑定事件：

        $((".point")).popup({
            supports : "svg"
        });

        $(".point").popup();

        $(d3.selectAll(".point")).popup();

如果不走运，你们中有谁遇到过这个问题吗？

Answer 1

我在Vue.js应用程序的d3 viz中实现了一个语义UI弹出窗口。为了使弹出窗口出现，我必须在Semantic-UI CSS (v2.3.1)脚本中更改一个字符：

在node_modules/semantic-ui-css/semantic.js中，我必须将10869行中的运算符从===改为!==。带上下文的工作片段如下：

10867    supports: {
10868      svg: function() {
10869        return (typeof SVGGraphicsElement !== 'undefined');
10870      }
10871    },

我的事件绑定稍有不同，因为我在一个Vue组件mounted钩子中为d3事件添加了一个处理程序，该钩子包含template，其中包含触发d3事件的svg元素。我确信这里的问题是supports.svg函数，而不是绑定或处理方法。