文章/答案/技术大牛

发布

问删除d3工具提示onclick
EN

Stack Overflow用户

提问于 2019-10-10 13:56:13

回答 2查看 726关注 0票数 0

我正在使用d3图表来显示散点图。我将在单击时显示工具提示。如果我点击页面上的任何地方，我必须删除工具提示。我应该如何删除工具提示？

var svg = d3.select("#scatter_plot")
  .append("svg")
  .attr("width", chart_width)
  .attr("height", chart_height)
// create x_scale

var div = d3.select("body").append("div")
  .attr("class", "tooltip1 scatter_tooltip")
  .style("opacity", 0);
// add circles
svg.selectAll("circle")
  .data(data)
  .enter()
  .append("circle")
  .attr("cx", function (d) {
    return x_scale(d.Staff_count)
  })
  .attr("cy", function (d) {
    return y_scale(d.Outlets)
  })
  .attr("r", function (d) {
    return a_scale(d.Total_Sales)
  })
  .attr("fill", function (d) { return scatter_color(d.Total_Sales) })
  .on("click", function (d) {
    var div_html = "<div class='d-flex justify-content-center m-2'><div class='font-weight-bolder pr-2'>"
    var div_end =  "<hr>" + "</div></div>" + div_html + "Total Sales" + ": " + d.Total_Sales + "</div></div>" + "</div></div>"+ div_html + "Outlets" + ": " + d.Outlets + "</div></div>" + "</div></div>"+ div_html + "Staff Count" + ": " + d.Staff_count
    $(".tooltip1").show()
    div.transition()
      .duration(100)
      .style("opacity", .9);
    if (state_ == 'India') {
      div.html(div_html + d.State + div_end + "</div></div>" + "<button class = 'myBtn btn btn-primary' id='" + d.State + "'>District Details >></button>")
        .style("left", (d3.event.pageX) + "px")
        .style("top", (d3.event.pageY - 28) + "px");
    } else {
      div.html(div_html + d.District + div_end)
        .style("left", (d3.event.pageX) + "px")
        .style("top", (d3.event.pageY - 28) + "px");
    }
    tooltip_load()
    toolTipIsVisible()
  })

如果有人能给出一些如何解决这个问题的想法，那将是很有帮助的。

javascript

jquery

d3.js

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-10-10 14:20:56

您可以侦听正文或文档上的单击事件作为全局单击事件处理程序，在此处理程序中，您可以隐藏工具提示。在圆形单击事件处理程序中，您需要通过调用d3.event.stopPropagation()来停止传播到正文或文档的单击事件。

示例代码：

  .attr("fill", function (d) { return scatter_color(d.Total_Sales) })
  .on("click", function (d) {
    var div_html = "<div class='d-flex justify-content-center m-2'><div class='font-weight-bolder pr-2'>"
    var div_end =  "<hr>" + "</div></div>" + div_html + "Total Sales" + ": " + d.Total_Sales + "</div></div>" + "</div></div>"+ div_html + "Outlets" + ": " + d.Outlets + "</div></div>" + "</div></div>"+ div_html + "Staff Count" + ": " + d.Staff_count
    $(".tooltip1").show()
    div.transition()
      .duration(100)
      .style("opacity", .9);
    if (state_ == 'India') {
      div.html(div_html + d.State + div_end + "</div></div>" + "<button class = 'myBtn btn btn-primary' id='" + d.State + "'>District Details >></button>")
        .style("left", (d3.event.pageX) + "px")
        .style("top", (d3.event.pageY - 28) + "px");
    } else {
      div.html(div_html + d.District + div_end)
        .style("left", (d3.event.pageX) + "px")
        .style("top", (d3.event.pageY - 28) + "px");
    }
    tooltip_load()
    toolTipIsVisible()

    // added code
    d3.event.stopPropagation()
  })

  // global listener
  d3.select('body').on('click', resetTooltip)

  function resetTooltip() {
    // reset tooltip state
    div.style('opacity', 0)
    $(".tooltip1").hide()
  }

这里有一个例子：http://bl.ocks.org/jasondavies/3186840

票数 1

Stack Overflow用户

发布于 2020-06-12 18:22:26

一旦您离开组件，在创建新的工具提示之前，您可以使用：

Array.prototype.forEach.call(document.querySelectorAll('.d3-tip'), (t) => t.parentNode.removeChild(t));

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/58316273

复制

相似问题

问删除d3工具提示onclick
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问删除d3工具提示onclickEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问删除d3工具提示onclick
EN