使用SVG变换缩放y维时，d3.svg.line笔划会倾斜

Question

Using d3's d3.svg.line produces a line which looks after magnifying only in the y-dimension like this one

Here is the corresponding path element

<path d="M 70.13775,
    303.1818181818182 L 73.03775,
    285.9090909090909 L 75.93775,
    402.5 L 78.83775,
    402.5 L 81.73775,
    419.77272727272725 L 84.63775,
    342.0454545454545 L 87.53775"></path>

As one can see, when the pen is moved to the right, the width of the corresponding line segment is a different one compared to the width of the line of the path segment, when the pen is moved vertically.

Question : Is it possible to draw the line in a such way that the width of line is the same everywhere? As if one draws the line with holding a pen with a round brush perpendicular to the drawing area.

Answer 1

If you want to scale your line along one axis, instead of using an svg transform you would probably be better off using a d3.scale to scale your incoming data when you make your d3.svg.line() .

Lets say you have a d3 scale called myScale

Then when you make your d3 svg line, you can use the scale to modify one of the coordinates:

var lineGen = d3.svg.line()
  .x(function(d) {return d.x;})
  .y(function(d) {return myScale(d.y);});

The solution of using vector-effect will probably give you the result you want in bleeding edge browsers, but it seems like overkill to use an effect to do something this simple, and the lack of browser support for SVG1.2 features might become problematic for you. If you were trying to fix a static svg file that would probably be the way to go, but since you are generating it with d3, you might as well use the built-in methods for scaling.

EDIT

For a simpler solution, you could even scale it by a constant factor:

var scaleFactor = 1.75;
var lineGen = d3.svg.line()
  .x(function(d) {return d.x;})
  .y(function(d) {return d.y * scaleFactor;});