使用D3/SVG的语义UI弹出
提问于 2018-02-08 23:09:05
我目前正在用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();如果不走运，你们中有谁遇到过这个问题吗？
回答 1
Stack Overflow用户
发布于 2018-12-17 21:16:57
我在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函数，而不是绑定或处理方法。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48696275
复制相关文章
![[llvm] LLVM 核心类简明示例 : llvm::Value && llvm::Type && llvm::Constant](https://ask.qcloudimg.com/http-save/yehe-2947774/o46l02twbr.png)
腾讯云开发者
