Javascript D3非圆弧

我希望使用D3JSV3在HTML中使用SVG创建非圆弧。我的问题是，我能创建的非圆弧实际上是经过变换的圆弧。因此，圆弧的笔划宽度不均匀，看起来很笨拙。以下是一份：

以下是一个结果示例：

以下是圆弧的外观（在Viso中绘制）：

---

是否有人知道创建非圆形SVG圆弧的方法（表示半径变化）？

您可以创建一个简单的折线图，并使用d3.curveBasis或任何其他您喜欢的插值。播放数据以获得所需的结果

以下是片段：

var保证金={
前30名，
右:20,，
底数：30，
左：50
};
变量宽度=550-margin.left-margin.right；
变量高度=150-margin.top-margin.bottom；
var x=d3.scaleLinear（）.range（[0，width]）；
变量y=d3.scaleLinear（）.range（[height，0]）；
var valueline=d3.line（）
.x（功能（d）{
返回x（d.x）；
})
.y（功能（d）{
返回y（d.y）；
}).曲线（d3.曲线基）；
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
风险值数据=[{
x:1，
y:“0”
}, {
x:1.05，
y:“0.6”
}, {
x:3，
y:“1.3”
}, {
x:4.95，
y:“0.6”
}, {
x:5，
y:“0”
}];
data.forEach（函数（d）{
d、 x=d.x
d、 y=+d.y；
});
x、 域（d3）。范围（数据，函数（d）{
返回d.x；
}));
y、 域（[0，d3.max（数据，函数（d））{
返回d.y；
})]);
追加（“路径”）
.attr（“d”，valueline（数据））
路径{
笔画：黑色；
笔画宽度：8；
填充：无；
笔划线头：圆形；
形状渲染：几何精度；
}
为什么您需要D3？你自己画吧：这不是椭圆弧。
var vis = d3.select("body").append("svg")    
vis.attr("width", "100%")
    .attr("height", "100%")
    .append("path")
    .attr("d", d3.svg.arc()
        .innerRadius(500)
        .outerRadius(500)
        .startAngle(-90 * (Math.PI / 180))
        .endAngle(90 * (Math.PI / 180)))
    .attr("stroke", "black")
    .attr("transform", "translate(510,170) scale(1,0.3)")
    .attr("stroke-width", 14);