如何向D3折线图添加交互功能（线条和标签）？

Question

我是D3的新手。js目前正在为我的一个项目开发一个折线图。我在这里引用了文档和示例，并在这里创建了自己的版本。现在，我计划在这里添加两个交互式功能：

1. 在图表的鼠标上方绘制一条到最近数据点的垂直线

为了使此功能更加清晰，请参考此示例。

以下是我尝试的，来自一个建议：

svg.append("g")        // creating new 'group' element
.selectAll('rect')     // adding a rectangle for the label
.selectAll('line');    // adding a line

但是，直线和矩形不会显示。我在谷歌上搜索了很多次，但没有白费。我错过了什么？

jsFiddle




Answer 1

//create groups for line and label (and invisible selection area)
var infos = svg.append('g')
  .selectAll('rect')
  .data(data)
  .enter()
  .append('g')
//move to datapoint location
  .attr('transform',function(d,i){d.x = x(d.date)  ; d.y = 0; return "translate(" + d.x + "," + d.y + ")";});

//create and select line "rectangles" (easier than doing actual lines)
infos.append("rect")
.attr('class','line')
.attr('height', height)
.attr('width', 1)
.attr('opacity',0);

//create and select line "rectangles" (easier than doing actual lines)
infos.append("rect")
.attr('class','area')
.attr('height', height)
//should probably do something to make sure they don't overlap, such as measure distance between neighbours and use that as width
.attr('width', width/data.length/2)
.attr('opacity',0)
//move so that the data point is in the middle
.attr('x',-width/data.length/4)
.on('mouseover', function(){
    g_elem = this.parentNode;
    d3.select(g_elem).selectAll(".line").attr("opacity",1);
})
.on('mouseout', function(){
    g_elem = this.parentNode;
    d3.select(g_elem).selectAll(".line").attr("opacity",0);
});

http://jsfiddle.net/SKb8W/7/

对于标签，以下是一个有用的示例：http://jsfiddle.net/WLYUY/5/（来自D3.js：使用元素位置而不是鼠标位置来定位工具提示？）

对于使用鼠标坐标，您可以执行以下操作：

var coordinates = [0, 0];
coordinates = d3.mouse(this);
var x = coordinates[0];
var y = coordinates[1];

（从D3中的鼠标位置开始）