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

使用d3的

d3.svg.line

生成一条线，该线只在y维中放大，如下所示

下面是相应的path元素

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

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

---

问题：有没有可能以这样的方式画出一条线，即线的宽度在任何地方都是一样的？如果你想沿着一个轴缩放直线，而不是使用svg变换，你最好在制作

d3.svg.line（）

时使用

d3.scale

来缩放传入数据

假设您有一个d3量表，名为

myScale

然后，在制作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;});

---

你在缩放路径吗？拉斯克托夫：是的，我把整个画面放大了很多哦，笨蛋。我只缩放y轴，而不是x轴。这就是问题所在。我仍然没有任何解决办法。那就把这两个维度都放大。如果要展开这些点，可以相应地修改数据。解决方案是将属性

矢量效果

设置为

非缩放笔划

，cf。