我有以下散点图usind d3.js http://gkalliatakis.github.io.//现在,我想每次鼠标移到三角形上方时都增加时间(x轴的值)。 我读了很多示例: http : //bl.ocks.org/weiglemc/6185069,但是我无法为我的项目修改它们。 有什么想法吗?

#1楼 票数:3 已采纳

我已经修改了您的代码,以合并示例链接中的工具提示。 关键是这样的:

1.)将div工具提示附加到您的html正文中( 请注意 ,您的html格式不正确,它没有正文,我添加了这些标记):

 var tooltip = d3.select('body')
      .append('div')
      .attr('class', 'tooltip')
      .style("opacity", 0);

2.)在鼠标悬停/鼠标移出点时,更新div的html并显示/隐藏工具提示:

svg.selectAll(".point")
  .data(session_data)
  .enter()
  .append("path")
  .on("mouseover", function(d, i) { // show it and update html
    d3.select('.tooltip')
    tooltip.transition()
      .duration(200)
      .style("opacity", .9);
    tooltip.html(d.x)
      .style("left", (d3.event.pageX + 5) + "px")
      .style("top", (d3.event.pageY - 28) + "px");
  })
  .on("mouseout", function(d, i) {
    tooltip.transition()
      .duration(500)
      .style("opacity", 0);
  })
  .attr("class", "point")
  ...

这里的工作示例。

  ask by Grigorios Kalliatakis translate from so

未解决问题?本站智能推荐:

1回复

我在 d3 中的工具提示不会出现在正确的位置

我试图在散点图中添加一个简单的工具提示,问题是它显示在图表下方,我不知道它是否用于“div”,但我已经尝试使用 svg 和 g 但仍然不会显示. 有没有其他方法可以添加我的工具提示?
1回复

用于nvd3散点图的自定义x轴工具提示

我正在使用nvd3 Scatter Chart,我看到可以使用以下功能自定义工具提示内容。 当鼠标在气泡上移动时,会突出显示/显示自定义工具提示内容以及点/气泡的x值和y值。 我想显示自定义内容,而不是显示x轴标签。 我怎样才能做到这一点? 谢谢,
1回复

是否可以将Piecharts添加到d3工具提示中

我一直在另一个图表的工具提示中搜索图表的工作示例。 到目前为止,我还找不到任何东西。 我想知道是否有可能。
2回复

在D3饼图中添加工具提示的问题

我正在使用D3.js构建饼图。 我正在按照本教程在D3中构建饼图。 现在,我想在饼图的每个分段中添加工具提示。 我正在尝试使用回调执行一些事件。 像这样 .. 在这里,如果您可以看到我在回调中添加了onMouseoverSegment事件,该事件将在鼠标悬停时触发警报。
1回复

D3工具提示也是D3的一个提示

非常感谢您的帮助-我对D3还是陌生的。 我正在开发一种嵌套的D3版本。 当将第一个D3视域中的一个元素悬停在鼠标上时,我希望显示第二个D3视域(即第一个元素的条形图分布)。 这可能吗? 您能否概述一下如何实现? 为了进一步说明:假设第一个是GDP与各个国家人口的散点图。 当将
1回复

将工具提示添加到D3线性图

我对如何在线性d3图表中添加工具提示感到疯狂,以便用户可以看到多年来性能的特定值。 这是小提琴: http : //jsfiddle.net/d9Lya/这是代码 我实际上是D3的新手,并且看到了许多其他示例,但无法在我的js代码中重现它们。 谁能帮我? 问候
1回复

d3工具提示| 传入变量

我有一个网页,其中包含11个不同区域中的每个区域的4 d3图表。 这些图表之一是面积图,代码片段是: 我想在图表中添加工具提示。 在面积图中,每个区域都有不同的产品。 有些产品有7个产品,其他产品有5个。我需要在其运行时值(0-10)上使用mm变量来调用consSubProduct
1回复

d3工具提示未显示

开始探索D3进行我的一些工作。尝试通过d3将工具提示添加到网络图,但是经过四处搜索并尝试了不同的解决方案后,它仍然拒绝显示... desc:使用d3的图形(在线) 添加工具提示: 在CSS中添加样式 初始化工具提示块(尝试使用append('g')在svg中添加工具