如何使用 d3.js 路径生成器绘制曲线和直线？答案

【问题标题】：How to draw curved and straight lines using d3.js path generator?如何使用 d3.js 路径生成器绘制曲线和直线？
【发布时间】：2015-02-28 20:33:21
【问题描述】：

我正在尝试使用 d3 路径生成器绘制温度计形状，而不是在 HTML 中对其进行硬编码。我已经能够使用 d3 路径生成器绘制直线或曲线，但我需要能够同时做到这两点才能获得这种形状。这是我用 HTML 硬编码的内容。

<path d ="  M 50,35 
                    L 50,400
                    A 50 50, 0, 1, 0, 95 400
                    L 95,35
                    A 25 25, 0, 0, 0, 50 35" />

【问题讨论】：

D3 路径生成器不适合绘制特定类型的形状。
用 d3 绘制它而不是在 html 中硬编码的最好方法是什么？
我看不出有什么理由不对其进行硬编码。您还可以将d 属性的值保留为变量并根据需要应用。
如果它是硬编码的，那么调整大小的最佳方法是什么？硬编码不同尺寸的选项并根据用户输入插入它们？
只需应用 transform 和 scale(2) 或类似的东西。

标签： javascript html svg d3.js

【解决方案1】：

我可以通过应用transform 和scale() 来使其工作。

if(size=="small")
     shape.attr('transform', "scale(.5)");
else if(size=="large")
     shape.attr('transform', "scale(2)");

感谢 Lars Kotthoff 给出答案。

【讨论】：