Javascript 无法使用d3.js在svg中绘制圆角矩形_Javascript_D3.js_Svg

Javascript 无法使用d3.js在svg中绘制圆角矩形
javascript d3.js svg
Javascript 无法使用d3.js在svg中绘制圆角矩形,javascript,d3.js,svg,Javascript,D3.js,Svg,这是我的代码： var svg=d3.选择（“drawRegion”） .append（“svg”）； svg .attr（“宽度”、“100%”） .attr（“高度”、“100%”） .attr（“视图框”、“0 0 400 100”）； var roundedPath=svg .append（“路径”）； var path=“M0 100 L0 L300 0 A100 100 0 300 100 Z” 环形通道 .attr（“d”，路径） .attr（“填充”、“无”） .attr（“笔
这是我的代码：
var svg=d3.选择（“drawRegion”）
.append（“svg”）；
svg
.attr（“宽度”、“100%”）
.attr（“高度”、“100%”）
.attr（“视图框”、“0 0 400 100”）；
var roundedPath=svg
.append（“路径”）；
var path=“M0 100 L0 L300 0 A100 100 0 300 100 Z”
环形通道
.attr（“d”，路径）
.attr（“填充”、“无”）
.attr（“笔划宽度”，“2px”）
.attr（“笔划”和“#000”）
#绘图区域{
宽度：400px；
高度：100px；
显示：内联块；
位置：固定；
排名：0；
底部：0；
左：0；
右：0；
保证金：自动；
位置：相对位置；
}

使用此链接


身体{
保证金：自动；
宽度：960px；
}
路径{
填充：#ccc；
行程：#000；
笔划宽度：1.5px；
}
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，960）
.attr（“高度”，500）
.附加（“g”）
.attr（“转换”、“翻译（480250）”）；
var rect=svg.append（“路径”）
.attr（“d”，rightRoundedRect（-240，-120480，240，20））；
//返回具有圆角的矩形的路径数据。
//注意：使用具有rx和ry属性的元素可能更容易！
//左上角是⟨x、 y⟩.
函数rightRoundedRect（x、y、宽度、高度、半径）{
返回“M”+x+“，“+y”
+“h”+（宽度-半径）
+“a”+半径+”，“+半径+”0 0 1“+半径+”，“+半径
+“v”+（高度-2*半径）
+“a”+半径+，“+半径+”0 0 1”+-半径+，“+半径
+“h”+（半径-宽度）
+“z”；
}
使用此链接


身体{
保证金：自动；
宽度：960px；
}
路径{
填充：#ccc；
行程：#000；
笔划宽度：1.5px；
}
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，960）
.attr（“高度”，500）
.附加（“g”）
.attr（“转换”、“翻译（480250）”）；
var rect=svg.append（“路径”）
.attr（“d”，rightRoundedRect（-240，-120480，240，20））；
//返回具有圆角的矩形的路径数据。
//注意：使用具有rx和ry属性的元素可能更容易！
//左上角是⟨x、 y⟩.
函数rightRoundedRect（x、y、宽度、高度、半径）{
返回“M”+x+“，“+y”
+“h”+（宽度-半径）
+“a”+半径+”，“+半径+”0 0 1“+半径+”，“+半径
+“v”+（高度-2*半径）
+“a”+半径+，“+半径+”0 0 1”+-半径+，“+半径
+“h”+（半径-宽度）
+“z”；
}
如果检查调试控制台，将看到以下错误：
错误：属性d:应为数字“…0 300 100 Z”
本质上，这是告诉您的d
属性的格式错误。A（圆弧）的参数太多（您有一个额外的0）。修复你仍然会看到你的形状有点不稳定。应该是：

var svg=d3.选择（“drawRegion”）
.append（“svg”）；
svg
.attr（“宽度”、“100%”）
.attr（“高度”、“100%”）
.attr（“视图框”、“0 0 400 100”）；
var roundedPath=svg
.append（“路径”）；
var path=“M0 100 L0 L300 0 A100 100 0 1 300 100 Z”
环形通道
.attr（“d”，路径）
.attr（“填充”、“无”）
.attr（“笔划宽度”，“2px”）
.attr（“笔划”和“#000”）；

#绘图区域{
宽度：400px；
高度：100px；
显示：内联块；
位置：固定；
排名：0；
底部：0；
左：0；
右：0；
保证金：自动；
位置：相对位置；
}
如果检查调试控制台，将看到以下错误：
错误：属性d:应为数字“…0 300 100 Z”
本质上，这是告诉您的d
属性的格式错误。A（圆弧）的参数太多（您有一个额外的0）。修复你仍然会看到你的形状有点不稳定。应该是：

var svg=d3.选择（“drawRegion”）
.append（“svg”）；
svg
.attr（“宽度”、“100%”）
.attr（“高度”、“100%”）
.attr（“视图框”、“0 0 400 100”）；
var roundedPath=svg
.append（“路径”）；
var path=“M0 100 L0 L300 0 A100 100 0 1 300 100 Z”
环形通道
.attr（“d”，路径）
.attr（“填充”、“无”）
.attr（“笔划宽度”，“2px”）
.attr（“笔划”和“#000”）；

#绘图区域{
宽度：400px；
高度：100px；
显示：内联块；
位置：固定；
排名：0；
底部：0；
左：0；
右：0；
保证金：自动；
位置：相对位置；
}
有几件事不对：
Arc（A）命令中的值太多
您的弧端坐标错误。您需要从300,0扫到200100（而不是300100）
你的横扫旗错了。它必须是“1”（顺时针）

var svg=d3.选择（“drawRegion”）
.append（“svg”）；
svg
.attr（“宽度”、“100%”）
.attr（“高度”、“100%”）
.attr（“视图框”、“0 0 400 100”）；
var roundedPath=svg
.append（“路径”）；
var path=“M0 100 L0 L300 0 A100 100 0 1 200 100 Z”
环形通道
.attr（“d”，路径）
.attr（“填充”、“无”）
.attr（“笔划宽度”，“2px”）
.attr（“笔划”和“#000”）
#绘图区域{
宽度：400px；
高度：100px；
显示：内联块；
位置：固定；
排名：0；
底部：0；
左：0；
右：0；
保证金：自动；
位置：相对位置；
}
有几件事不对：
Arc（A）命令中的值太多
您的弧端坐标错误。您需要从300,0扫到200100（而不是300100）
你的横扫旗错了。它必须是“1”（顺时针）

var svg=d3.选择（“drawRegion”）
.append（“svg”）；
svg
.attr（“宽度”、“100%”）
.attr（“高度”、“100%”）
.attr（“视图框”、“0 0 400 100”）；
var roundedPath=svg
.append（“路径”）；
var path=“M0 100 L0 L300 A100 1
<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  margin: auto;
  width: 960px;
}

path {
  fill: #ccc;
  stroke: #000;
  stroke-width: 1.5px;
}

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var svg = d3.select("body").append("svg")
    .attr("width", 960)
    .attr("height", 500)
  .append("g")
    .attr("transform", "translate(480,250)");

var rect = svg.append("path")
    .attr("d", rightRoundedRect(-240, -120, 480, 240, 20));

// Returns path data for a rectangle with rounded right corners.
// Note: it’s probably easier to use a <rect> element with rx and ry attributes!
// The top-left corner is ⟨x,y⟩.
function rightRoundedRect(x, y, width, height, radius) {
  return "M" + x + "," + y
       + "h" + (width - radius)
       + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + radius
       + "v" + (height - 2 * radius)
       + "a" + radius + "," + radius + " 0 0 1 " + -radius + "," + radius
       + "h" + (radius - width)
       + "z";
}

</script>