javascript - 如何向 D3 折线图添加交互功能(折线和标签)？

Question

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

1. 将鼠标悬停在图表中时，绘制一条到最近数据点的垂直线。
2. 在此垂直线旁边显示具有 X 和 Y 属性的标签。

为了让这个功能更加清晰，请引用这个example .

这是我根据建议尝试的:

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: Position tooltips using element position, not mouse position?)

要使用鼠标坐标，您可以执行以下操作:

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

(来自 Mouse position in D3 )