Javascript 与d3js v4中的工具提示交互_Javascript_D3.js

Javascript 与d3js v4中的工具提示交互

javascript d3.js

Javascript 与d3js v4中的工具提示交互,javascript,d3.js,Javascript,D3.js,我正在D3JS的v4中创建一个概念证明。我尝试做的一件事是在数据点上悬停时显示工具提示。我发现了一个很好的例子我现在需要做的是在工具提示中添加一个链接（或任何可单击的元素）。我基于上面的示例创建了一个工具，并添加了一个指向工具提示的链接。我无法单击链接，工具提示显示在折线图下方，直到z索引为止我尝试在图表和工具提示上设置z索引，但没有效果。有人能给我指出正确的方向来解决这个问题吗 <!DOCTYPE html> <meta charset="utf-8"> <s

我正在D3JS的v4中创建一个概念证明。我尝试做的一件事是在数据点上悬停时显示工具提示。我发现了一个很好的例子

我现在需要做的是在工具提示中添加一个链接（或任何可单击的元素）。我基于上面的示例创建了一个工具，并添加了一个指向工具提示的链接。我无法单击链接，工具提示显示在折线图下方，直到z索引为止

我尝试在图表和工具提示上设置z索引，但没有效果。有人能给我指出正确的方向来解决这个问题吗

<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 2px;
}

div.tooltip {
  position: absolute;
  text-align: center;
  width: 150px;
  height: 100px;
  padding: 2px;
  font: 12px sans-serif;
  background: lightsteelblue;
  border: 0px;
  border-radius: 8px;
  pointer-events: none;
}

</style>
<body>

<!-- load the d3.js library -->
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

// set the dimensions and margins of the graph
var margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

// parse the date / time
var parseTime = d3.timeParse("%d-%b-%y");
var formatTime = d3.timeFormat("%e %B");

// set the ranges
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);

// define the line
var valueline = d3.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.close); });

// append the svg obgect to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

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

// Get the data
d3.csv("data.csv", function(error, data) {
  if (error) throw error;

  // format the data
  data.forEach(function(d) {
      d.date = parseTime(d.date);
      d.close = +d.close;
  });

  // scale the range of the data
  x.domain(d3.extent(data, function(d) { return d.date; }));
  y.domain([0, d3.max(data, function(d) { return d.close; })]);

  // add the valueline path.
  svg.append("path")
     .data([data])
     .attr("class", "line")
     .attr("d", valueline);

  // add the dots with tooltips
  svg.selectAll("dot")
     .data(data)
   .enter().append("circle")
     .attr("r", 5)
     .attr("cx", function(d) { return x(d.date); })
     .attr("cy", function(d) { return y(d.close); })
     .on("mouseover", function(d) {
       div.transition()
         .duration(200)
         .style("opacity", .9);
       div.html(formatTime(d.date) + "<br/>" + d.close + "<br/><a href='www.google.com'>Test it</a>")
         .style("left", (d3.event.pageX) + "px")
         .style("top", (d3.event.pageY - 28) + "px");
       });

  // add the X Axis
  svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));

  // add the Y Axis
  svg.append("g")
      .call(d3.axisLeft(y));

});

</script>
</body>


/*设置CSS*/
.线路{
填充：无；
笔画：钢蓝；
笔画宽度：2px；
}
分区工具提示{
位置：绝对位置；
文本对齐：居中；
宽度：150px；
高度：100px；
填充：2px；
字体：12px无衬线；
背景：淡蓝色；
边界：0px；
边界半径：8px；
指针事件：无；
}
//设置图形的尺寸和边距
var margin={顶部：20，右侧：20，底部：30，左侧：50}，
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
//解析日期/时间
var parseTime=d3.timeParse（“%d-%b-%y”）；
var formatTime=d3.timeFormat（“%e%B”）；
//设定范围
var x=d3.scaleTime（）.range（[0，width]）；
变量y=d3.scaleLinear（）.range（[height，0]）；
//界定界线
var valueline=d3.line（）
.x（函数（d）{返回x（d.date）；}）
.y（函数（d）{返回y（d.close）；}）；
//将svg对象附加到页面主体
//将“组”元素附加到“svg”
//将“组”元素移动到左上角
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
var div=d3.选择（“主体”）.追加（“div”）
.attr（“类”、“工具提示”）
.样式（“不透明度”，0）；
//获取数据
d3.csv（“data.csv”，函数（错误，数据）{
如果（错误）抛出错误；
//格式化数据
data.forEach（函数（d）{
d、 日期=解析时间（d.日期）；
d、 close=+d.close；
});
//缩放数据的范围
x、 域（d3.extent（数据，函数（d）{返回d.date；}））；
y、 域（[0，d3.max（数据，函数（d）{返回d.close；}）]；
//添加valueline路径。
追加（“路径”）
.数据（[数据]）
.attr（“类”、“行”）
.attr（“d”，valueline）；
//添加带有工具提示的点
svg.selectAll（“点”）
.数据（数据）
.enter（）.append（“圆”）
.attr（“r”，5）
.attr（“cx”，函数（d）{返回x（d.date）；}）
.attr（“cy”，函数（d）{返回y（d.close）；}）
.on（“鼠标悬停”，功能（d）{
过渡部（）
.持续时间（200）
.样式（“不透明度”，.9）；
div.html（格式时间（d.date）+“
”+d.close+“
”）
.style（“左”，“d3.event.pageX）+“px”）
.style（“top”，（d3.event.pageY-28）+“px”）；
});
//添加X轴
svg.append（“g”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（x））；
//添加Y轴
svg.append（“g”）
.调用（d3.左（y））；
});

根据链接中的示例创建工具提示时，复制了其CSS：

div.tooltip {
    pointer-events: none;
    ...
}

我们通常在

工具提示中将

指针事件设置为none
，正如链接的示例所做的那样，原因是我们希望在触发鼠标悬停
的元素上获得鼠标悬停
事件（通常将工具提示的不透明度设置为零），如果工具提示的位置与元素接近（有时甚至直接在其上方），指针可能会悬停在div上，并破坏鼠标输出
。除此之外，将指针事件
设置为无
的另一个重要原因是，它允许工具提示后面的其他元素获得鼠标覆盖
事件，就像工具提示不存在一样
但是，因为在您的代码中没有mouseout
，所以这里更简单的解决方案是简单地消除CSS中的指针事件：none
。这样，
将获得单击事件
这是更新后的plunker:
只需在工具提示CSS:@GerardoFurtado中删除指针事件：无
，谢谢！如果你加上这个作为回答，我会接受的