1

I have a curve generated by a D3.js line generating function with interpolate set as "basis". The problem is that the line generated only touches the first and last point given into the line generating function and does not pass through the ones in between. I am aware that these are treated as control points to generate the b-spline curve, but what I am looking for is a way to "project"/calculate the control points so that the curve does go through every point in my path array.

These in between points in my application are "handle" points which the user can drag to manipulate the curve. If I set interpolate to "cardinal" then the curve does go through every point, but this is not the type of curve that I want, I want the smoother curve produced by the "basis" interpolation.

Here is my line generator code:

 this.lineGenerator =  d3.svg.line()
                             .tension(0.5)
                             .x(function(d) { return d.x; })
                             .y(function(d) { return d.y; })
                             .interpolate("basis");

And here is a picture that illustrates the problem.

enter image description here

In other words the three points that I have are the points at the start and end of the curve and the point at the "apex" (don't know what it is called... but the "highest" point of the curve). So in the diagram, the red dot will represent the apex and the curve must run though this point.

I found this question which deals with this same issue, but with HTML 5 Canvas rather than D3.js. I tried to apply the formula given here to calculate the control points for the curve, but ended up with this result:

enter image description here

The "drag point" (red dot) is now below the curve rather than on it and the distance between the dot and the curve grows as the curve is dragged further out. I speculate that the reason that the formula in the question linked to did not work is because the formula for the D3 curve is a b-spline and therefore different from curve generated by quadraticCurveTo mentioned in that question. (I may be wrong about this though... what I know about the maths involved is dangerous!)

So my questions are: does anyone know the formula for the curve generated by the D3 "basis" interpolation? And can anyone help in deriving the formula for calculating the control points for the curve similar to what is done in the question that I linked to.

Community
  • 1
  • 1
BruceHill
  • 6,954
  • 8
  • 62
  • 114
  • Have you considered giving the red dots to the line generator as well? This would ensure that they are on the path. – Lars Kotthoff May 11 '13 at 11:53
  • 1
    The red dots are given to the line generator and if the line generator has interpolate set to "cardinal" then they do appear on the path, but set to "basis" they do not, because the points between the first and the last point are treated as "control points" and therefore do not appear on the line. Look at this question, http://stackoverflow.com/questions/14040297/points-on-line-in-d3-js#comment23677032_14040297, for another example of the problem. The images shown in that question is exactly what I am seeing with my `D3` charts. – BruceHill May 11 '13 at 14:47

0 Answers0