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

Question

我正在尝试使用 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" />

Answer 1

我能够通过应用 transform 和 scale() 来让它工作。

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

谢谢 Lars Kotthoff 的回答。

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

How to draw curved and straight lines using d3.js path generator?

html

javascript

svg

d3.js