Невозможно нарисовать прямоугольник с закругленными углами в svg, используя d3.js - PullRequest
Новая
       1

Невозможно нарисовать прямоугольник с закругленными углами в svg, используя d3.js

0 голосов
/ 08 июня 2018

Здесь - мой код: 

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");
#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>

Я сделал все в соответствии с документацией, и я ожидаю получить прямоугольник, у которого правый нижний угол закруглен.Но я получаю странную форму.

В соответствии с этим решением могло быть изменение значений large-arc-flag, sweep-flag, я перепробовал все 4 возможные комбинации 0 и 1, но все же появляются странные формы.

Что я здесь не так делаю?

Ответы [ 3 ]

0 голосов
/ 08 июня 2018

Если вы осмотрите консоль отладки, вы увидите следующую ошибку:

Ошибка: атрибут d: ожидаемое число, "… 0 0 0 0 300 100 Z"

По сути, это говорит о том, что ваш атрибут d сформирован неправильно.A (дуга) имеет слишком много параметров (у вас есть дополнительный 0).Исправление того, что вы все еще увидите свою форму, немного шатко.Должно быть: 

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");
 
#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>
0 голосов
/ 08 июня 2018

Есть несколько неправильных вещей:

  1. В вашей команде Arc (A) было слишком много значений.
  2. Неправильные координаты конца вашей дуги.Вам нужно развернуться от 300,0 до 200 100 (не 300 100).
  3. Ваш флаг развертки был неверным.Это должно было быть "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>
0 голосов
/ 08 июня 2018

используйте эту ссылку

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...