Associated heatmap and sparkline tooltip

Question

I created a heat map and sparkled next to the insulation.

HERE Plunker

Now I would like to see a red dot appear on the corresponding light line when the user hangs over the heat map cell. On the other hand, when the user hangs over the spark line, the corresponding cell in the heat map is highlighted.

I hope it becomes clearer with some drawings:

I thought I could change the code for now:

var cells = svg.selectAll('rect')
    .data(data)
    .enter()
    .append('g')
    .append('rect')
    //...
    .on('mouseover', tip.show) // <- HERE
    .on('mouseout', tip.hide);

I have to keep an eye on the rectangle where the mouse is located, and somehow transfer this data to a piece of code that controls the spark line. But I do not know how to do this, and I have not found similar examples.

Thank!

Answer 1

liblary:

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

, ,

• D3 ,
• D3 id
• DOM (Ex: attr-id)
• , , , , ,
• , D3,
• liblary (d3-tip)

• id ,

• , data​​p >

• ,

, , , ,