title: Dash around single point in interpolated curve with d3.js
body: <p>I want to draw a curve with interpolation for some given points. Here, the points represent how much solar energy can be generated by solar panels, so there is one point per hour of the day with sun. The number of points may vary depending on the month of the year (for example, 10 points in December and 16 points in June, because there are respectively 10 and 16 hours of sun a day in those months).</p>
  
  <p>Until here everything fine, but now we want to add a sun image at the hour of the day you're seeing the graphics. For this, I have created 2 lines : one before the current hour and one after, and put the sun image in the current hour position. It looks like this in June with 16 points at 1PM :
  <a href="https://i.stack.imgur.com/KM1RX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KM1RX.png" alt="Curve in June"></a></p>
  
  <p>This looks fine. The problem is when there are less points, the space between the point before and after the current hour is bigger, and becomes graphically too big. This is for January at 9AM with 10 points (wrong graphical rendering) : </p>
  
  <p><a href="https://i.stack.imgur.com/b6lt9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/b6lt9.png" alt="Curve in January"></a></p>
  
  <p>(in both images, the ending / beginning time at the bottom are static)</p>
  
  <p>I want the blank space that is left for the sun to be always the same.</p>
  
  <p>I have tried various things :</p>
  
  <ul>
  <li>adding some points "closer to the sun" in the data : doesn't work because it messes up the scale, and even with a scale updated after adding the points, the top part of the curve is not centered anymore</li>
  <li>putting a background on the sun image : the graph must be integrated in a transparent container</li>
  <li>using stroke-dasharray : i couldn't manage to understand the percentage / pixels values enough to calculate it. For example, with a distance to dash of 100%, it would dash before the end of the line. For the pixels unit, I haven't found any way to calculate the number of pixels generated by the curve drawing so it isn't possible to calculate the exact position of the dash</li>
  <li>using a linearGradiant : I can't get to scale a proper percentage positioning. Anyway, the render is ugly because it cuts the line color vertically, which is not nice graphically</li>
  </ul>
  
  <p>If anyone has an idea of how to properly accomplish this, it would be great. Also I may probably have missed something obvious or think a wrong way for this problem, but after 3 days of thinking about it I'm a bit overloading haha. Thank you for reading</p>