Question

所以，我正在考虑工具提示或弹出窗口的内容，除了有更多信息，我还希望每个信息框都在页面上的相同位置。总的来说，我只是想要点击一个SVG（代表一些数据元素），并在点击事件，触发器和信息框之前弹出它;如果它涵盖了SVG，甚至可以给它自己的关闭功能。我知道我以前见过这么多次，但确切的名字现在正在逃避我。

现在，我有一个圈子：

    node.append("circle")
        .attr("cx", sankey.nodeWidth()/2)
        .attr("cy", function(d){return d.dy/2;})
        .attr("r",function(d){return Math.sqrt(d.dy);})
        .style("fill", function(d){return d.color = color(d.name.replace(/ .*/,""));})
        .style("stroke", function(d){return d3.rgb(d.color).darker(1);})
        .style("stroke-width",5)
        .on("mouseover", tip.show)
        .on("mouseout", tip.hide)
        .on("click", changeColor(function(d){return d.color;}))
        .append("title")

我希望写下这样的内容：

    .on("click",function(d){/*Create a rect element*/})
    .append("text", "This element represents the "+d.name+" element and will weigh approximately "+d.weight+"lbs.")
    .attr("cx", 50)
    .attr("cy", 50)
    .on("click_exit?" function(d){this.remove();})

我不确定如何处理此问题，但我只想在点击时显示一个文本框，并有一个退出按钮（或一些关闭方法）来关闭它。我可以在上面的代码中添加类似上面代码的内容，还是必须创建一个与它完全不相关的全新svg元素？

Answer 1

之前我做过类似的事情，我发现当不做实际的d3图形化时，SVG可能是一个真正的痛苦。在这种情况下我会使用html。

我所做的是创建一个包含所需模板的html元素，绝对将其放置在我想要的位置，然后设置display:none或opacity:0。

然后是你的onClick函数

.on("click",function(d){
    d3.select('.my-info-box p')
        .append(d)
        .style('display','block')
})

这是裸机功能。这里的内容是使用html而不是svg。要关闭它，您可以在框的右上角/左侧放置×，然后点击，关闭信息框。

如何通过单击D3.js中的SVG元素来添加和删除信息模板？

1 个答案: