使用SVG变换缩放y维时，d3.svg.line笔划会发生偏移

Question

使用d3的d3.svg.line生成一条在y维度上放大仅的行，就像这样

这是相应的路径元素

<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>

可以看出，当笔向右移动时，当笔垂直移动时，相应线段的宽度与路径线的宽度相比是不同的。

问题：是否可以以这样的方式绘制线条，使得线条的宽度在任何地方都相同？好像用一支钢笔画一条线，画笔垂直于绘图区域。

Answer 1

如果您想沿一个轴缩放线条，而不是使用svg变换，那么在制作d3.scale时，最好使用d3.svg.line()缩放传入数据。

假设您有一个名为myScale

的d3比例

然后当你制作d3 svg线时，可以使用比例来修改其中一个坐标：

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

使用vector-effect的解决方案可能会在最前沿的浏览器中为您提供所需的结果，但使用效果来做这么简单的事情并且缺少对SVG1.2的浏览器支持似乎有些过分功能可能会成为您的问题。如果你试图修复一个静态svg文件，可能就是这样，但是既然你用d3生成它，你也可以使用内置方法进行缩放。

修改

对于更简单的解决方案，您甚至可以按常数因子进行缩放：

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