Question

Here是我的代码：

＆＃13;

var svg = d3.select("#drawRegion")
                .append("svg");

svg
	.attr("width", "100%")
  .attr("height", "100%")
  .attr("viewBox", "0 0 400 100");
  

var roundedPath = svg
								.append("path");

var path = "M0 100 L0 0 L300 0 A100 100 0 0 0 0 300 100 Z"

roundedPath
				.attr("d", path)
        .attr("fill", "none")
        .attr("stroke-width", "2px")
        .attr("stroke", "#000");

＆＃13;

#drawRegion {
    width: 400px;
    height: 100px;
    display: inline-block;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    position: relative;
}

＆＃13;

<div id="drawRegion">

</div>
<script src="https://d3js.org/d3.v5.min.js"></script>

＆＃13;

我根据文档做了所有事情，我希望得到右下角圆角的矩形。但我得到的是一些奇怪的形状。

根据this，解决方案可能是更改large-arc-flag, sweep-flag值，我尝试了0和1的所有4种可能组合，但仍会出现一些奇怪的形状。

我在这里做错了什么？

Answer 1

有一些问题：

您的Arc（A）命令中有太多值。
您的弧端坐标错误。你需要从300,0扫描到200,100（而不是300,100）。
你的扫描标志错了。它需要为“1”（顺时针）。

var svg = d3.select("#drawRegion")
                .append("svg");

svg
  .attr("width", "100%")
  .attr("height", "100%")
  .attr("viewBox", "0 0 400 100");
  

var roundedPath = svg
                    .append("path");

var path = "M0 100 L0 0 L300 0 A100 100 0 0 1 200 100 Z"

roundedPath
        .attr("d", path)
        .attr("fill", "none")
        .attr("stroke-width", "2px")
        .attr("stroke", "#000");

#drawRegion {
    width: 400px;
    height: 100px;
    display: inline-block;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    position: relative;
}

<div id="drawRegion">

</div>
<script src="https://d3js.org/d3.v5.min.js"></script>

Answer 2

如果您检查调试控制台，则会看到以下错误：

错误：属性d：预期数字，＆＃34; ... 0 0 0 0 300 100 Z＆＃34;

基本上这是告诉您d属性格式错误。 A（弧）参数太多（你有一个额外的0）。修复你仍然看到你的形状有点不稳定。它应该是：

＆＃13;

var svg = d3.select("#drawRegion")
                .append("svg");

svg
	.attr("width", "100%")
  .attr("height", "100%")
  .attr("viewBox", "0 0 400 100");
  

var roundedPath = svg
								.append("path");

var path = "M0 100 L0 0 L300 0 A100 100 0 0 1 300 100 Z"

roundedPath
				.attr("d", path)
        .attr("fill", "none")
        .attr("stroke-width", "2px")
        .attr("stroke", "#000");

＆＃13;

#drawRegion {
    width: 400px;
    height: 100px;
    display: inline-block;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    position: relative;
}

＆＃13;

<div id="drawRegion">

</div>
<script src="https://d3js.org/d3.v5.min.js"></script>

＆＃13;

Answer 3

使用此链接

https://bl.ocks.org/mbostock/3468167

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

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

3 个答案: