显示工具提示当在d3.js中调用函数时。

huangapple go评论74阅读模式
英文:

show tooltip when function is called in d3 js

问题

I try to show the previously generated tooltip when the element is selected in a dropdown list. I am using d3 js version 3 and d3-tip.

function initialize_map(id){
  // select map
  var svg = d3.select(id).append("svg")
    .attr("width", map_width)
    .attr("height", map_height)

  // add tooltip
  var tooltip = d3.tip()
                  .attr('class', 'd3-tip')
                  .attr("id", "tool-" + id)
                  .offset([-5, 0])
                  .html(d => get_location_info(d, "tool-" + id))

  // display the municipalities
  svg.append("g")
    .attr("class", "municipalities")
    .selectAll("path")
    .data(municipalities)
    .enter()
    .append("path")
    .attr("id", function(d){ return d.GEO_ID })
    .attr("d", path)
    .on('mouseover', tooltip.show)
    .on('mouseout', tooltip.hide)

  svg.call(tooltip)
}

function showSelectedMunic(munic_info_id){
  var tooltip = d3.select('#tool-map1')

  svg = d3.select("#map1")
  svg.selectAll(".municipalities")
  .selectAll("path")
  .filter(function(d) { return d.id == munic_info_id  })
  .call(tooltip.show)
}

I can select the correct element when the function showSelectedMunic is called but somehow .call(tooltip.show) does give me the error Uncaught TypeError: callback is undefined. When I would change this code to .on('mouseout', tooltip.show) it would work. How do I have to modify it in order to show the tooltip?

英文:

I try to show the previously generated tooltip when the element is selected in a dropdown list. I am using d3 js version 3 and d3-tip.

    function initialize_map(id){
      // select map
      var svg = d3.select(id).append("svg")
        .attr("width", map_width)
        .attr("height", map_height)
    
      // add tooltip
      var tooltip = d3.tip()
                  .attr('class', 'd3-tip')
                  .attr("id", "tool-" + id)
                  .offset([-5, 0])
                  .html(d => get_location_info(d, "tool-" + id))
    
      // display the municipalities
      svg.append("g")
        .attr("class", "municipalities")
        .selectAll("path")
        .data(municipalities)
        .enter()
        .append("path")
        .attr("id", function(d){ return d.GEO_ID })
        .attr("d", path)
        .on('mouseover', tooltip.show)
        .on('mouseout', tooltip.hide)

svg.call(tooltip)

}

function showSelectedMunic(munic_info_id){
var tooltip = d3.select('#tool-map1')



  svg = d3.select("#map1")
  svg.selectAll(".municipalities")
  .selectAll("path")
  .filter(function(d) { return d.id == munic_info_id  })
  .call(tooltip.show)
  

}

I can select the correct element when the function showSelectedMunicis called but somehow .call(tooltip.show) does give me the error Uncaught TypeError: callback is undefined. When I would change this code to .on('mouseout', tooltip.show)it would work. How do I have to modify it in order to show the tooltip?

答案1

得分: 0

以下是翻译好的部分:

经过一些实验,我找到了一个解决方法。我只需手动触发事件 mouseover

function changeSelectedMunic(munic_info_id){

var evt = new MouseEvent("mouseover");

svg = d3.select("#map1")

svg.selectAll(".municipalities")
  .selectAll("path")
  .filter(function(d) { return d.id == munic_info_id  })
  .node().dispatchEvent(evt);

}
英文:

After some experimenting, I have a workaround. I just manually trigger the event mouseover:

function changeSelectedMunic(munic_info_id){

var evt = new MouseEvent("mouseover");

svg = d3.select("#map1")

svg.selectAll(".municipalities")
  .selectAll("path")
  .filter(function(d) { return d.id == munic_info_id  })
  .node().dispatchEvent(evt);

}

huangapple
  • 本文由 发表于 2023年5月11日 03:21:36
  • 转载请务必保留本文链接:https://go.coder-hub.com/76221926.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定