D3图表:如何在双击事件中获取x,y值

时间:2017-02-08 14:18:19

标签: javascript jquery d3.js

我正在用D3.js创建一个简单的折线图。当用户双击折线图上的时,我希望能够提取日期和值。目前,我只想弹出一个警告,显示该日期折线图的日期和价值。

需要精确度元素 - 因为如果在折线图上没有出现双击,我希望忽略双击事件。

以下是简单折线图的代码:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://d3js.org/d3.v4.min.js"></script>
  </head>
  <body>
      <svg width="960" height="500"></svg>
      <script>

      var svg = d3.select("svg"),
          margin = {top: 20, right: 20, bottom: 30, left: 50},
          width = +svg.attr("width") - margin.left - margin.right,
          height = +svg.attr("height") - margin.top - margin.bottom,
          g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

      var parseTime = d3.timeParse("%d-%b-%y");

      var x = d3.scaleTime()
          .rangeRound([0, width]);

      var y = d3.scaleLinear()
          .rangeRound([height, 0]);

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

      d3.tsv("data.tsv", function(d) {
        d.date = parseTime(d.date);
        d.close = +d.close;
        return d;
      }, function(error, data) {
        if (error) throw error;

        x.domain(d3.extent(data, function(d) { return d.date; }));
        y.domain(d3.extent(data, function(d) { return d.close; }));

        g.append("g")
            .attr("transform", "translate(0," + height + ")")
            .call(d3.axisBottom(x));


        g.append("g")
            .call(d3.axisLeft(y))

        g.append("path")
            .datum(data)
            .attr("fill", "none")
            .attr("stroke", "steelblue")
            .attr("stroke-linejoin", "round")
            .attr("stroke-linecap", "round")
            .attr("stroke-width", 1.5)
            .attr("d", line);
      });

      </script>  
  </body>
</html>

以下是data.tsv的内容:

date    close
24-Apr-07   93.24
25-Apr-07   95.35
26-Apr-07   98.84
27-Apr-07   99.92
30-Apr-07   99.80
1-May-07    99.47
2-May-07    100.39
3-May-07    100.40
4-May-07    100.81
7-May-07    103.92
8-May-07    105.06
9-May-07    106.88
10-May-07   107.34
11-May-07   108.74
14-May-07   109.36
15-May-07   107.52
16-May-07   107.34
17-May-07   109.44
18-May-07   110.02
21-May-07   111.98
22-May-07   113.54
23-May-07   112.89
24-May-07   110.69
25-May-07   113.62
29-May-07   114.35
30-May-07   118.77
31-May-07   121.19
1-Jun-07    118.40
4-Jun-07    121.33
5-Jun-07    122.67
6-Jun-07    123.64
7-Jun-07    124.07
8-Jun-07    124.49
11-Jun-07   120.19
12-Jun-07   120.38
13-Jun-07   117.50
14-Jun-07   118.75
15-Jun-07   120.50
18-Jun-07   125.09
19-Jun-07   123.66
20-Jun-07   121.55
21-Jun-07   123.90
22-Jun-07   123.00
25-Jun-07   122.34
26-Jun-07   119.65
27-Jun-07   121.89
28-Jun-07   120.56
29-Jun-07   122.04
2-Jul-07    121.26
3-Jul-07    127.17
5-Jul-07    132.75
6-Jul-07    132.30
9-Jul-07    130.33
10-Jul-07   132.35
11-Jul-07   132.39
12-Jul-07   134.07
13-Jul-07   137.73
16-Jul-07   138.10
17-Jul-07   138.91
18-Jul-07   138.12
19-Jul-07   140.00
20-Jul-07   143.75
23-Jul-07   143.70
24-Jul-07   134.89
25-Jul-07   137.26
26-Jul-07   146.00
27-Jul-07   143.85
30-Jul-07   141.43
31-Jul-07   131.76
1-Aug-07    135.00
2-Aug-07    136.49
3-Aug-07    131.85
6-Aug-07    135.25
7-Aug-07    135.03
8-Aug-07    134.01
9-Aug-07    126.39
10-Aug-07   125.00
13-Aug-07   127.79
14-Aug-07   124.03
15-Aug-07   119.90
16-Aug-07   117.05
17-Aug-07   122.06
20-Aug-07   122.22
21-Aug-07   127.57
22-Aug-07   132.51
23-Aug-07   131.07
24-Aug-07   135.30
27-Aug-07   132.25
28-Aug-07   126.82
29-Aug-07   134.08
30-Aug-07   136.25
31-Aug-07   138.48
4-Sep-07    144.16
5-Sep-07    136.76
6-Sep-07    135.01
7-Sep-07    131.77
10-Sep-07   136.71
11-Sep-07   135.49
12-Sep-07   136.85
13-Sep-07   137.20
14-Sep-07   138.81
17-Sep-07   138.41
18-Sep-07   140.92
19-Sep-07   140.77
20-Sep-07   140.31
21-Sep-07   144.15
24-Sep-07   148.28
25-Sep-07   153.18
26-Sep-07   152.77
27-Sep-07   154.50
28-Sep-07   153.47
1-Oct-07    156.34
2-Oct-07    158.45
3-Oct-07    157.92
4-Oct-07    156.24
5-Oct-07    161.45
8-Oct-07    167.91
9-Oct-07    167.86
10-Oct-07   166.79
11-Oct-07   162.23
12-Oct-07   167.25
15-Oct-07   166.98
16-Oct-07   169.58
17-Oct-07   172.75
18-Oct-07   173.50
19-Oct-07   170.42
22-Oct-07   174.36
23-Oct-07   186.16
24-Oct-07   185.93
25-Oct-07   182.78
26-Oct-07   184.70
29-Oct-07   185.09
30-Oct-07   187.00
31-Oct-07   189.95
1-Nov-07    187.44
2-Nov-07    187.87
5-Nov-07    186.18
6-Nov-07    191.79
7-Nov-07    186.30
8-Nov-07    175.47
9-Nov-07    165.37
12-Nov-07   153.76
13-Nov-07   169.96
14-Nov-07   166.11
15-Nov-07   164.30
16-Nov-07   166.39
19-Nov-07   163.95
20-Nov-07   168.85
21-Nov-07   168.46
23-Nov-07   171.54
26-Nov-07   172.54
27-Nov-07   174.81
28-Nov-07   180.22
29-Nov-07   184.29
30-Nov-07   182.22
3-Dec-07    178.86
4-Dec-07    179.81
5-Dec-07    185.50
6-Dec-07    189.95
7-Dec-07    194.30
10-Dec-07   194.21
11-Dec-07   188.54
12-Dec-07   190.86
13-Dec-07   191.83
14-Dec-07   190.39
17-Dec-07   184.40
18-Dec-07   182.98
19-Dec-07   183.12
20-Dec-07   187.21
21-Dec-07   193.91
24-Dec-07   198.80
26-Dec-07   198.95
27-Dec-07   198.57
28-Dec-07   199.83
31-Dec-07   198.08
2-Jan-08    194.84
3-Jan-08    194.93
4-Jan-08    180.05
7-Jan-08    177.64
8-Jan-08    171.25
9-Jan-08    179.40
10-Jan-08   178.02
11-Jan-08   172.69
14-Jan-08   178.78
15-Jan-08   169.04
16-Jan-08   159.64
17-Jan-08   160.89
18-Jan-08   161.36
22-Jan-08   155.64
23-Jan-08   139.07
24-Jan-08   135.60
25-Jan-08   130.01
28-Jan-08   130.01
29-Jan-08   131.54
30-Jan-08   132.18
31-Jan-08   135.36
1-Feb-08    133.75
4-Feb-08    131.65
5-Feb-08    129.36
6-Feb-08    122.00
7-Feb-08    121.24
8-Feb-08    125.48
11-Feb-08   129.45
12-Feb-08   124.86
13-Feb-08   129.40
14-Feb-08   127.46
15-Feb-08   124.63
19-Feb-08   122.18
20-Feb-08   123.82
21-Feb-08   121.54
22-Feb-08   119.46
25-Feb-08   119.74
26-Feb-08   119.15
27-Feb-08   122.96
28-Feb-08   129.91
29-Feb-08   125.02
3-Mar-08    121.73
4-Mar-08    124.62
5-Mar-08    124.49
6-Mar-08    120.93
7-Mar-08    122.25
10-Mar-08   119.69
11-Mar-08   127.35
12-Mar-08   126.03
13-Mar-08   127.94
14-Mar-08   126.61
17-Mar-08   126.73
18-Mar-08   132.82
19-Mar-08   129.67
20-Mar-08   133.27
24-Mar-08   139.53
25-Mar-08   140.98
26-Mar-08   145.06
27-Mar-08   140.25
28-Mar-08   143.01
31-Mar-08   143.50
1-Apr-08    149.53
2-Apr-08    147.49
3-Apr-08    151.61
4-Apr-08    153.08
7-Apr-08    155.89
8-Apr-08    152.84
9-Apr-08    151.44
10-Apr-08   154.55
11-Apr-08   147.14
14-Apr-08   147.78
15-Apr-08   148.38
16-Apr-08   153.70
17-Apr-08   154.49
18-Apr-08   161.04
21-Apr-08   168.16
22-Apr-08   160.20
23-Apr-08   162.89
24-Apr-08   168.94
25-Apr-08   169.73
28-Apr-08   172.24
29-Apr-08   175.05
30-Apr-08   173.95
1-May-08    180.00
2-May-08    180.94
5-May-08    184.73
6-May-08    186.66
7-May-08    182.59
8-May-08    185.06
9-May-08    183.45
12-May-08   188.16
13-May-08   189.96
14-May-08   186.26
15-May-08   189.73
16-May-08   187.62
19-May-08   183.60
20-May-08   185.90
21-May-08   178.19
22-May-08   177.05
23-May-08   181.17
27-May-08   186.43
28-May-08   187.01
29-May-08   186.69
30-May-08   188.75
2-Jun-08    186.10
3-Jun-08    185.37
4-Jun-08    185.19
5-Jun-08    189.43
6-Jun-08    185.64
9-Jun-08    181.61
10-Jun-08   185.64
11-Jun-08   180.81
12-Jun-08   173.26
13-Jun-08   172.37
16-Jun-08   176.84
17-Jun-08   181.43
18-Jun-08   178.75
19-Jun-08   180.90
20-Jun-08   175.27
23-Jun-08   173.16
24-Jun-08   173.25
25-Jun-08   177.39
26-Jun-08   168.26
27-Jun-08   170.09
30-Jun-08   167.44
1-Jul-08    174.68
2-Jul-08    168.18
3-Jul-08    170.12
7-Jul-08    175.16
8-Jul-08    179.55
9-Jul-08    174.25
10-Jul-08   176.63
11-Jul-08   172.58
14-Jul-08   173.88
15-Jul-08   169.64
16-Jul-08   172.81
17-Jul-08   171.81
18-Jul-08   165.15
21-Jul-08   166.29
22-Jul-08   162.02
23-Jul-08   166.26
24-Jul-08   159.03
25-Jul-08   162.12
28-Jul-08   154.40
29-Jul-08   157.08
30-Jul-08   159.88
31-Jul-08   158.95
1-Aug-08    156.66
4-Aug-08    153.23
5-Aug-08    160.64
6-Aug-08    164.19
7-Aug-08    163.57
8-Aug-08    169.55
11-Aug-08   173.56
12-Aug-08   176.73
13-Aug-08   179.30
14-Aug-08   179.32
15-Aug-08   175.74
18-Aug-08   175.39
19-Aug-08   173.53
20-Aug-08   175.84
21-Aug-08   174.29
22-Aug-08   176.79
25-Aug-08   172.55
26-Aug-08   173.64
27-Aug-08   174.67
28-Aug-08   173.74
29-Aug-08   169.53
2-Sep-08    166.19
3-Sep-08    166.96
4-Sep-08    161.22
5-Sep-08    160.18
8-Sep-08    157.92
9-Sep-08    151.68
10-Sep-08   151.61
11-Sep-08   152.65
12-Sep-08   148.94
15-Sep-08   140.36
16-Sep-08   139.88
17-Sep-08   127.83
18-Sep-08   134.09
19-Sep-08   140.91
22-Sep-08   131.05
23-Sep-08   126.84
24-Sep-08   128.71
25-Sep-08   131.93
26-Sep-08   128.24
29-Sep-08   105.26
30-Sep-08   113.66
1-Oct-08    109.12
2-Oct-08    100.10
3-Oct-08    97.07
6-Oct-08    98.14
7-Oct-08    89.16
8-Oct-08    89.79
9-Oct-08    88.74
10-Oct-08   96.80
13-Oct-08   110.26
14-Oct-08   104.08
15-Oct-08   97.95
16-Oct-08   101.89
17-Oct-08   97.40
20-Oct-08   98.44
21-Oct-08   91.49
22-Oct-08   96.87
23-Oct-08   98.23
24-Oct-08   96.38
27-Oct-08   92.09
28-Oct-08   99.91
29-Oct-08   104.55
30-Oct-08   111.04
31-Oct-08   107.59
3-Nov-08    106.96
4-Nov-08    110.99
5-Nov-08    103.30
6-Nov-08    99.10
7-Nov-08    98.24
10-Nov-08   95.88
11-Nov-08   94.77
12-Nov-08   90.12
13-Nov-08   96.44
14-Nov-08   90.24
17-Nov-08   88.14
18-Nov-08   89.91
19-Nov-08   86.29
20-Nov-08   80.49
21-Nov-08   82.58
24-Nov-08   92.95
25-Nov-08   90.80
26-Nov-08   95.00
27-Nov-08   95.00
28-Nov-08   92.67
1-Dec-08    88.93
2-Dec-08    92.47
3-Dec-08    95.90
4-Dec-08    91.41
5-Dec-08    94.00
8-Dec-08    99.72
9-Dec-08    100.06
10-Dec-08   98.21
11-Dec-08   95.00
12-Dec-08   98.27
15-Dec-08   94.75
16-Dec-08   95.43
17-Dec-08   89.16
18-Dec-08   89.43
19-Dec-08   90.00
22-Dec-08   85.74
23-Dec-08   86.38
24-Dec-08   85.04
25-Dec-08   85.04
26-Dec-08   85.81
29-Dec-08   86.61
30-Dec-08   86.29
31-Dec-08   85.35
1-Jan-09    85.35
2-Jan-09    90.75
5-Jan-09    94.58
6-Jan-09    93.02
7-Jan-09    91.01
8-Jan-09    92.70
9-Jan-09    90.58
12-Jan-09   88.66
13-Jan-09   87.71
14-Jan-09   85.33
15-Jan-09   83.38
16-Jan-09   82.33
20-Jan-09   78.20
21-Jan-09   82.83
22-Jan-09   88.36
23-Jan-09   88.36
26-Jan-09   89.64
27-Jan-09   90.73
28-Jan-09   94.20
29-Jan-09   93.00
30-Jan-09   90.13
2-Feb-09    91.51
3-Feb-09    92.98
4-Feb-09    93.55
5-Feb-09    96.46
6-Feb-09    99.72
9-Feb-09    102.51
10-Feb-09   97.83
11-Feb-09   96.82
12-Feb-09   99.27
13-Feb-09   99.16
17-Feb-09   94.53
18-Feb-09   94.37
19-Feb-09   90.64
20-Feb-09   91.20
23-Feb-09   86.95
24-Feb-09   90.25
25-Feb-09   91.16
26-Feb-09   89.19
27-Feb-09   89.31
2-Mar-09    87.94
3-Mar-09    88.37
4-Mar-09    91.17
5-Mar-09    88.84
6-Mar-09    85.30
9-Mar-09    83.11
10-Mar-09   88.63
11-Mar-09   92.68
12-Mar-09   96.35
13-Mar-09   95.93
16-Mar-09   95.42
17-Mar-09   99.66
18-Mar-09   101.52
19-Mar-09   101.62
20-Mar-09   101.59
23-Mar-09   107.66
24-Mar-09   106.50
25-Mar-09   106.49
26-Mar-09   109.87
27-Mar-09   106.85
30-Mar-09   104.49
31-Mar-09   105.12
1-Apr-09    108.69
2-Apr-09    112.71
3-Apr-09    115.99
6-Apr-09    118.45
7-Apr-09    115.00
8-Apr-09    116.32
9-Apr-09    119.57
10-Apr-09   119.57
13-Apr-09   120.22
14-Apr-09   118.31
15-Apr-09   117.64
16-Apr-09   121.45
17-Apr-09   123.42
20-Apr-09   120.50
21-Apr-09   121.76
22-Apr-09   121.51
23-Apr-09   125.40
24-Apr-09   123.90
27-Apr-09   124.73
28-Apr-09   123.90
29-Apr-09   125.14
30-Apr-09   125.83
1-May-09    127.24
4-May-09    132.07
5-May-09    132.71
6-May-09    132.50
7-May-09    129.06
8-May-09    129.19
11-May-09   129.57
12-May-09   124.42
13-May-09   119.49
14-May-09   122.95
15-May-09   122.42
18-May-09   126.65
19-May-09   127.45
20-May-09   125.87
21-May-09   124.18
22-May-09   122.50
26-May-09   130.78
27-May-09   133.05
28-May-09   135.07
29-May-09   135.81
1-Jun-09    139.35
2-Jun-09    139.49
3-Jun-09    140.95
4-Jun-09    143.74
5-Jun-09    144.67
8-Jun-09    143.85
9-Jun-09    142.72
10-Jun-09   140.25
11-Jun-09   139.95
12-Jun-09   136.97
15-Jun-09   136.09
16-Jun-09   136.35
17-Jun-09   135.58
18-Jun-09   135.88
19-Jun-09   139.48
22-Jun-09   137.37
23-Jun-09   134.01
24-Jun-09   136.22
25-Jun-09   139.86
26-Jun-09   142.44
29-Jun-09   141.97
30-Jun-09   142.43
1-Jul-09    142.83
2-Jul-09    140.02
3-Jul-09    140.02
6-Jul-09    138.61
7-Jul-09    135.40
8-Jul-09    137.22
9-Jul-09    136.36
10-Jul-09   138.52
13-Jul-09   142.34
14-Jul-09   142.27
15-Jul-09   146.88
16-Jul-09   147.52
17-Jul-09   151.75
20-Jul-09   152.91
21-Jul-09   151.51
22-Jul-09   156.74
23-Jul-09   157.82
24-Jul-09   159.99
27-Jul-09   160.10
28-Jul-09   160.00
29-Jul-09   160.03
30-Jul-09   162.79
31-Jul-09   163.39
3-Aug-09    166.43
4-Aug-09    165.55
5-Aug-09    165.11
6-Aug-09    163.91
7-Aug-09    165.51
10-Aug-09   164.72
12-Aug-09   165.31
13-Aug-09   168.42
14-Aug-09   166.78
17-Aug-09   159.59
18-Aug-09   164.00
19-Aug-09   164.60
20-Aug-09   166.33
21-Aug-09   169.22
24-Aug-09   169.06
25-Aug-09   169.40
26-Aug-09   167.41
27-Aug-09   169.45
28-Aug-09   170.05
31-Aug-09   168.21
1-Sep-09    165.30
2-Sep-09    165.18
3-Sep-09    166.55
4-Sep-09    170.31
8-Sep-09    172.93
9-Sep-09    171.14
10-Sep-09   172.56
11-Sep-09   172.16
14-Sep-09   173.72
15-Sep-09   175.16
16-Sep-09   181.87
17-Sep-09   184.55
18-Sep-09   185.02
21-Sep-09   184.02
22-Sep-09   184.48
23-Sep-09   185.50
24-Sep-09   183.82
25-Sep-09   182.37
28-Sep-09   186.15
29-Sep-09   185.38
30-Sep-09   185.35
1-Oct-09    180.86
2-Oct-09    184.90
5-Oct-09    186.02
6-Oct-09    190.01
7-Oct-09    190.25
8-Oct-09    189.27
9-Oct-09    190.47
12-Oct-09   190.81
13-Oct-09   190.02
14-Oct-09   191.29
15-Oct-09   190.56
16-Oct-09   188.05
19-Oct-09   189.86
20-Oct-09   198.76
21-Oct-09   204.92
22-Oct-09   205.20
23-Oct-09   203.94
26-Oct-09   202.48
27-Oct-09   197.37
28-Oct-09   192.40
29-Oct-09   196.35
30-Oct-09   188.50
2-Nov-09    189.31
3-Nov-09    188.75
4-Nov-09    190.81
5-Nov-09    194.03
6-Nov-09    194.34
9-Nov-09    201.46
10-Nov-09   202.98
11-Nov-09   203.25
12-Nov-09   201.99
13-Nov-09   204.45
16-Nov-09   206.63
17-Nov-09   207.00
18-Nov-09   205.96
19-Nov-09   200.51
20-Nov-09   199.92
23-Nov-09   205.88
24-Nov-09   204.44
25-Nov-09   204.19
26-Nov-09   204.19
27-Nov-09   200.59
30-Nov-09   199.91
1-Dec-09    196.97
2-Dec-09    196.23
3-Dec-09    196.48
4-Dec-09    193.32
7-Dec-09    188.95
8-Dec-09    189.87
9-Dec-09    197.80
10-Dec-09   196.43
11-Dec-09   194.67
14-Dec-09   196.98
15-Dec-09   194.17
16-Dec-09   195.03
17-Dec-09   191.86
18-Dec-09   195.43
21-Dec-09   198.23
22-Dec-09   200.36
23-Dec-09   202.10
24-Dec-09   209.04
25-Dec-09   209.04
28-Dec-09   211.61
29-Dec-09   209.10
30-Dec-09   211.64
31-Dec-09   210.73
1-Jan-10    210.73
4-Jan-10    214.01
5-Jan-10    214.38
6-Jan-10    210.97
7-Jan-10    210.58
8-Jan-10    211.98
11-Jan-10   210.11
12-Jan-10   207.72
13-Jan-10   210.65
14-Jan-10   209.43
15-Jan-10   205.93
18-Jan-10   205.93
19-Jan-10   215.04
20-Jan-10   211.72
21-Jan-10   208.07
22-Jan-10   197.75
25-Jan-10   203.08
26-Jan-10   205.94
27-Jan-10   207.88
28-Jan-10   199.29
29-Jan-10   192.06
1-Feb-10    194.73
2-Feb-10    195.86
3-Feb-10    199.23
4-Feb-10    192.05
5-Feb-10    195.46
8-Feb-10    194.12
9-Feb-10    196.19
10-Feb-10   195.12
11-Feb-10   198.67
12-Feb-10   200.38
15-Feb-10   200.38
16-Feb-10   203.40
17-Feb-10   202.55
18-Feb-10   202.93
19-Feb-10   201.67
22-Feb-10   200.42
23-Feb-10   197.06
24-Feb-10   200.66
25-Feb-10   202.00
26-Feb-10   204.62
1-Mar-10    208.99
2-Mar-10    208.85
3-Mar-10    209.33
4-Mar-10    210.71
5-Mar-10    218.95
8-Mar-10    219.08
9-Mar-10    223.02
10-Mar-10   224.84
11-Mar-10   225.50
12-Mar-10   226.60
15-Mar-10   223.84
16-Mar-10   224.45
17-Mar-10   224.12
18-Mar-10   224.65
19-Mar-10   222.25
22-Mar-10   224.75
23-Mar-10   228.36
24-Mar-10   229.37
25-Mar-10   226.65
26-Mar-10   230.90
29-Mar-10   232.39
30-Mar-10   235.84
31-Mar-10   235.00
1-Apr-10    235.97
2-Apr-10    235.97
5-Apr-10    238.49
6-Apr-10    239.54
7-Apr-10    240.60
8-Apr-10    239.95
9-Apr-10    241.79
12-Apr-10   242.29
13-Apr-10   242.43
14-Apr-10   245.69
15-Apr-10   248.92
16-Apr-10   247.40
19-Apr-10   247.07
20-Apr-10   244.59
21-Apr-10   259.22
22-Apr-10   266.47
23-Apr-10   270.83
26-Apr-10   269.50
27-Apr-10   262.04
28-Apr-10   261.60
29-Apr-10   268.64
30-Apr-10   261.09
3-May-10    266.35
4-May-10    258.68
5-May-10    255.98
6-May-10    246.25
7-May-10    235.86
10-May-10   253.99
11-May-10   256.52
12-May-10   262.09
13-May-10   258.36
14-May-10   253.82
17-May-10   254.22
18-May-10   252.36
19-May-10   248.34
20-May-10   237.76
21-May-10   242.32
24-May-10   246.76
25-May-10   245.22
26-May-10   244.11
27-May-10   253.35
28-May-10   256.88
31-May-10   256.88
1-Jun-10    260.83
2-Jun-10    263.95
3-Jun-10    263.12
4-Jun-10    255.96
7-Jun-10    250.94
8-Jun-10    249.33
9-Jun-10    243.20
10-Jun-10   250.51
11-Jun-10   253.51
14-Jun-10   254.28
15-Jun-10   259.69
16-Jun-10   267.25
17-Jun-10   271.87
18-Jun-10   274.07
21-Jun-10   270.17
22-Jun-10   273.85
23-Jun-10   270.97
24-Jun-10   269.00
25-Jun-10   266.70
28-Jun-10   268.30
29-Jun-10   256.17
30-Jun-10   251.53
1-Jul-10    248.48
2-Jul-10    246.94
5-Jul-10    246.94
6-Jul-10    248.63
7-Jul-10    258.66
8-Jul-10    258.09
9-Jul-10    259.62
12-Jul-10   257.28
13-Jul-10   251.80
14-Jul-10   252.73
15-Jul-10   251.45
16-Jul-10   249.90
19-Jul-10   245.58
20-Jul-10   251.89
21-Jul-10   254.24
22-Jul-10   259.02
23-Jul-10   259.94
26-Jul-10   259.28
27-Jul-10   264.08
28-Jul-10   260.96
29-Jul-10   258.11
30-Jul-10   257.25
2-Aug-10    261.85
3-Aug-10    261.93
4-Aug-10    262.98
5-Aug-10    261.70
6-Aug-10    260.09
9-Aug-10    261.75
10-Aug-10   259.41
11-Aug-10   250.19
12-Aug-10   251.79
13-Aug-10   249.10
16-Aug-10   247.64
17-Aug-10   251.97
18-Aug-10   253.07
19-Aug-10   249.88
20-Aug-10   249.64
23-Aug-10   245.80
24-Aug-10   239.93
25-Aug-10   242.89
26-Aug-10   240.28
27-Aug-10   241.62
30-Aug-10   242.50
31-Aug-10   243.10
1-Sep-10    250.33
2-Sep-10    252.17
3-Sep-10    258.77
6-Sep-10    258.77
7-Sep-10    257.81
8-Sep-10    262.92
9-Sep-10    263.07
10-Sep-10   263.41
13-Sep-10   267.04
14-Sep-10   268.06
15-Sep-10   270.22
16-Sep-10   276.57
17-Sep-10   275.37
20-Sep-10   283.23
21-Sep-10   283.77
22-Sep-10   287.75
23-Sep-10   288.92
24-Sep-10   292.32
27-Sep-10   291.16
28-Sep-10   286.86
29-Sep-10   287.37
30-Sep-10   283.75
1-Oct-10    282.52
4-Oct-10    278.64
5-Oct-10    288.94
6-Oct-10    289.19
7-Oct-10    289.22
8-Oct-10    294.07
11-Oct-10   295.36
12-Oct-10   298.54
13-Oct-10   300.14
14-Oct-10   302.31
15-Oct-10   314.74
18-Oct-10   318.00
19-Oct-10   309.49
20-Oct-10   310.53
21-Oct-10   309.52
22-Oct-10   307.47
25-Oct-10   308.84
26-Oct-10   308.05
27-Oct-10   307.83
28-Oct-10   305.24
29-Oct-10   300.98
1-Nov-10    304.18
2-Nov-10    309.36
3-Nov-10    312.80
4-Nov-10    318.27
5-Nov-10    317.13
8-Nov-10    318.62
9-Nov-10    316.08
10-Nov-10   318.03
11-Nov-10   316.66
12-Nov-10   308.03
15-Nov-10   307.04
16-Nov-10   301.59
17-Nov-10   300.50
18-Nov-10   308.43
19-Nov-10   306.73
22-Nov-10   313.36
23-Nov-10   308.73
24-Nov-10   314.80
26-Nov-10   315.00
29-Nov-10   316.87
30-Nov-10   311.15
1-Dec-10    316.40
2-Dec-10    318.15
3-Dec-10    317.44
6-Dec-10    320.15
7-Dec-10    318.21
8-Dec-10    321.01
9-Dec-10    319.76
10-Dec-10   320.56
13-Dec-10   321.67
14-Dec-10   320.29
15-Dec-10   320.36
16-Dec-10   321.25
17-Dec-10   320.61
20-Dec-10   322.21
21-Dec-10   324.20
22-Dec-10   325.16
23-Dec-10   323.60
27-Dec-10   324.68
28-Dec-10   325.47
29-Dec-10   325.29
30-Dec-10   323.66
31-Dec-10   322.56
3-Jan-11    329.57
4-Jan-11    331.29
5-Jan-11    334.00
6-Jan-11    333.73
7-Jan-11    336.12
10-Jan-11   342.46
11-Jan-11   341.64
12-Jan-11   344.42
13-Jan-11   345.68
14-Jan-11   348.48
18-Jan-11   340.65
19-Jan-11   338.84
20-Jan-11   332.68
21-Jan-11   326.72
24-Jan-11   337.45
25-Jan-11   341.40
26-Jan-11   343.85
27-Jan-11   343.21
28-Jan-11   336.10
31-Jan-11   339.32
1-Feb-11    345.03
2-Feb-11    344.32
3-Feb-11    343.44
4-Feb-11    346.50
7-Feb-11    351.88
8-Feb-11    355.20
9-Feb-11    358.16
10-Feb-11   354.54
11-Feb-11   356.85
14-Feb-11   359.18
15-Feb-11   359.90
16-Feb-11   363.13
17-Feb-11   358.30
18-Feb-11   350.56
22-Feb-11   338.61
23-Feb-11   342.62
24-Feb-11   342.88
25-Feb-11   348.16
28-Feb-11   353.21
1-Mar-11    349.31
2-Mar-11    352.12
3-Mar-11    359.56
4-Mar-11    360.00
7-Mar-11    355.36
8-Mar-11    355.76
9-Mar-11    352.47
10-Mar-11   346.67
11-Mar-11   351.99
14-Mar-11   353.56
15-Mar-11   345.43
16-Mar-11   330.01
17-Mar-11   334.64
18-Mar-11   330.67
21-Mar-11   339.30
22-Mar-11   341.20
23-Mar-11   339.19
24-Mar-11   344.97
25-Mar-11   351.54
28-Mar-11   350.44
29-Mar-11   350.96
30-Mar-11   348.63
31-Mar-11   348.51
1-Apr-11    344.56
4-Apr-11    341.19
5-Apr-11    338.89
6-Apr-11    338.04
7-Apr-11    338.08
8-Apr-11    335.06
11-Apr-11   330.80
12-Apr-11   332.40
13-Apr-11   336.13
14-Apr-11   332.42
15-Apr-11   327.46
18-Apr-11   331.85
19-Apr-11   337.86
20-Apr-11   342.41
21-Apr-11   350.70
25-Apr-11   353.01
26-Apr-11   350.42
27-Apr-11   350.15
28-Apr-11   346.75
29-Apr-11   350.13
2-May-11    346.28
3-May-11    348.20
4-May-11    349.57
5-May-11    346.75
6-May-11    346.66
9-May-11    347.60
10-May-11   349.45
11-May-11   347.23
12-May-11   346.57
13-May-11   340.50
16-May-11   333.30
17-May-11   336.14
18-May-11   339.87
19-May-11   340.53
20-May-11   335.22
23-May-11   334.40
24-May-11   332.19
25-May-11   336.78
26-May-11   335.00
27-May-11   337.41
31-May-11   347.83
1-Jun-11    345.51
2-Jun-11    346.10
3-Jun-11    343.44
6-Jun-11    338.04
7-Jun-11    332.04
8-Jun-11    332.24
9-Jun-11    331.49
10-Jun-11   325.90
13-Jun-11   326.60
14-Jun-11   332.44
15-Jun-11   326.75
16-Jun-11   325.16
17-Jun-11   320.26
20-Jun-11   315.32
21-Jun-11   325.30
22-Jun-11   322.61
23-Jun-11   331.23
24-Jun-11   326.35
27-Jun-11   332.04
28-Jun-11   335.26
29-Jun-11   334.04
30-Jun-11   335.67
1-Jul-11    343.26
5-Jul-11    349.43
6-Jul-11    351.76
7-Jul-11    357.20
8-Jul-11    359.71
11-Jul-11   354.00
12-Jul-11   353.75
13-Jul-11   358.02
14-Jul-11   357.77
15-Jul-11   364.92
18-Jul-11   373.80
19-Jul-11   376.85
20-Jul-11   386.90
21-Jul-11   387.29
22-Jul-11   393.30
25-Jul-11   398.50
26-Jul-11   403.41
27-Jul-11   392.59
28-Jul-11   391.82
29-Jul-11   390.48
1-Aug-11    396.75
2-Aug-11    388.91
3-Aug-11    392.57
4-Aug-11    377.37
5-Aug-11    373.62
8-Aug-11    353.21
9-Aug-11    374.01
10-Aug-11   363.69
11-Aug-11   373.70
12-Aug-11   376.99
15-Aug-11   383.41
16-Aug-11   380.48
17-Aug-11   380.44
18-Aug-11   366.05
19-Aug-11   356.03
22-Aug-11   356.44
23-Aug-11   373.60
24-Aug-11   376.18
25-Aug-11   373.72
26-Aug-11   383.58
29-Aug-11   389.97
30-Aug-11   389.99
31-Aug-11   384.83
1-Sep-11    381.03
2-Sep-11    374.05
6-Sep-11    379.74
7-Sep-11    383.93
8-Sep-11    384.14
9-Sep-11    377.48
12-Sep-11   379.94
13-Sep-11   384.62
14-Sep-11   389.30
15-Sep-11   392.96
16-Sep-11   400.50
19-Sep-11   411.63
20-Sep-11   413.45
21-Sep-11   412.14
22-Sep-11   401.82
23-Sep-11   404.30
26-Sep-11   403.17
27-Sep-11   399.26
28-Sep-11   397.01
29-Sep-11   390.57
30-Sep-11   381.32
3-Oct-11    374.60
4-Oct-11    372.50
5-Oct-11    378.25
6-Oct-11    377.37
7-Oct-11    369.80
10-Oct-11   388.81
11-Oct-11   400.29
12-Oct-11   402.19
13-Oct-11   408.43
14-Oct-11   422.00
17-Oct-11   419.99
18-Oct-11   422.24
19-Oct-11   398.62
20-Oct-11   395.31
21-Oct-11   392.87
24-Oct-11   405.77
25-Oct-11   397.77
26-Oct-11   400.60
27-Oct-11   404.69
28-Oct-11   404.95
31-Oct-11   404.78
1-Nov-11    396.51
2-Nov-11    397.41
3-Nov-11    403.07
4-Nov-11    400.24
7-Nov-11    399.73
8-Nov-11    406.23
9-Nov-11    395.28
10-Nov-11   385.22
11-Nov-11   384.62
14-Nov-11   379.26
15-Nov-11   388.83
16-Nov-11   384.77
17-Nov-11   377.41
18-Nov-11   374.94
21-Nov-11   369.01
22-Nov-11   376.51
23-Nov-11   366.99
25-Nov-11   363.57
28-Nov-11   376.12
29-Nov-11   373.20
30-Nov-11   382.20
1-Dec-11    387.93
2-Dec-11    389.70
5-Dec-11    393.01
6-Dec-11    390.95
7-Dec-11    389.09
8-Dec-11    390.66
9-Dec-11    393.62
12-Dec-11   391.84
13-Dec-11   388.81
14-Dec-11   380.19
15-Dec-11   378.94
16-Dec-11   381.02
19-Dec-11   382.21
20-Dec-11   395.95
21-Dec-11   396.44
22-Dec-11   398.55
23-Dec-11   403.43
27-Dec-11   406.53
28-Dec-11   402.64
29-Dec-11   405.12
30-Dec-11   405.00

如何处理双击事件,并在该日期提取折线图的日期和值 - 当双击该行时?

1 个答案:

答案 0 :(得分:2)

您可以在d3.tsv回调的末尾(行.attr("d", line);之后)添加这样的代码:

// Build a function to return the index where a given date would be inserted 
// into the sorted data array.
var bisectDate = d3.bisector(function(d) { return d.date; }).left;

// Build a function to scale the mouse x position into the width of the chart.
var scaleMouse = d3.scaleLinear().range([0, width]).domain([margin.left, margin.left + width]);

// Add a double click event listener to the svg element.
svg.on("dblclick", function() {

    // Get the mouse position relative to the svg element. The return is of the 
    // form [x, y].
    var mouse = d3.mouse(this);

    // If the mouse is outside of the chart area then return.
    if (mouse[0] < margin.left || mouse[0] > margin.left + width || mouse[1] < margin.top || mouse[1] > margin.top + height) return;

    // x.invert is the inverse of the x function defined above. It is a function 
    // that takes an x coordinate and returns a date. Here we scale the mouse
    // position into the chart and then do the inversion.
    var x0 = x.invert(scaleMouse(mouse[0])),

    // Use the date from x.invert and the bisectData fn built above to get an 
    // index into the data array.
        i = bisectDate(data, x0, 1),

    // Now get the actual data points around the index.
        d0 = data[i - 1],
        d1 = data[i],

    // And choose the one nearer to the date associated with where the mouse is.
        d = d1 != null && x0 - d0.date > d1.date - x0 ? d1 : d0;

    // Show the result.
    alert(d.date + "," + d.close);
});

此代码捕获svg元素上的双击事件,但忽略任何落在图表区域边界框之外的事件。然后,它使用鼠标的x位置查找最近的数据点,并在警告弹出窗口中显示结果。