在网页中的两个不同位置获取数据值

Question

我在此jsfiddle link

中有一个图表

 var data = [

    [2,2],
    [3,3],
    [4,4],
    [5, 4],
    [5.5, 5],
    [6, 6],
    [6, 7],
    [4,5],
    [7,9],
    [7,10]
    ];

如何将数据点放在图表上方，并在上图和下图之间创建链接。我想将下面图表中的数据点与上图中的数据点相关联。即一个数据源绘制上下两个象限的数据。第一个图表（上图）必须只包含没有行的数据点。我该如何实现这一目标？

Answer 1

这是一个FIDDLE，它实现了我在评论中提到的，对代码的修改最少。但是，我强烈建议您重新安排当前的代码。基本上，您希望找到两个图表构造中的常见内容并将代码分解出来。 （此外，当前的代码顺序是反转的，因为您首先使用较低的图表，然后决定第二个图表位于第一个图表上方。）

var chart2 = d3.select('#nolines')
    .append('svg:svg')
    .attr('width', width + margin.right + margin.left)
    .attr('height', height + margin.top + margin.bottom/4)
    .attr('class', 'chart');