Нарисуйте SVG-путь, используя объект / массив точек [duplicate]
Некоторые плакаты упоминали о CSS & nbsp; 3 пути к центру с помощью display:box.
Этот синтаксис устарел и больше не должен использоваться. [См. Также этот пост] .
Так что для полноты здесь самый последний способ сосредоточиться в CSS & nbsp; 3 с помощью Flexible Box Layout Module .
Итак, если у вас есть простая разметка вроде:
A
B
C
... и вы хотите центрировать свои элементы в поле, вот что вам нужно в родительском элементе (.box ):
.box {
display: flex;
flex-wrap: wrap; /* Optional. only if you want the items to wrap */
justify-content: center; /* For horizontal alignment */
align-items: center; /* For vertical alignment */
}
.box {
display: flex;
flex-wrap: wrap;
/* Optional. only if you want the items to wrap */
justify-content: center;
/* For horizontal alignment */
align-items: center;
/* For vertical alignment */
}
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.box {
height: 200px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
border: 2px solid tomato;
}
.box div {
margin: 0 10px;
width: 100px;
}
.item1 {
height: 50px;
background: pink;
}
.item2 {
background: brown;
height: 100px;
}
.item3 {
height: 150px;
background: orange;
}
A
B
C
Если вам нужно поддерживать старые браузеры, которые используют более старый синтаксис для flexbox , здесь хорошее место для просмотра.
3 ответа
Чтение вашего комментария Предположим, вы используете D3 v4. Начиная с версии 4 нет d3.svg, поэтому сообщение об ошибке. Строковый генератор, который вы ищете, теперь определяется как d3.line() .
Если вы все еще используете версию 3, это будет d3.svg.line().
Кроме того, как отмечали другие ответчики, это приведет к последующей ошибке, оставив остальную часть заявления без изменений, поскольку d3.line не имеет метода .interpolate(). Для этой цели D3 v4 имеет кривые заводы , которые используются для интерполяции. Эти заводы поставляются линейному генератору с использованием line.curve() . D3 v3's .interpolate("linear") теперь становится .curve(d3.curveLinear). Однако, поскольку line.curve() по умолчанию имеет значение d3.curveLinear, это может быть безопасно опущено в вашем случае.
Таким образом, утверждение выглядит следующим образом:
var lineFunction = d3.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.curve(d3.curveLinear); // Use for clarity, omit for brevity.
[Обновить]
Кроме того, если вы используете D3js v4, с этим предупреждением будет возникать проблема с этим утверждением .interpolate("linear");:
d3.line(...).x(...).y(...).interpolate is not a function.
В этой новой версии .interpolate("linear"); следует изменить на:
curve(d3.curveLinear);
Как и в описании кривой Linear .
Убедитесь, что ваш код был изменен в синтаксисе ниже, поскольку в версии 4 нет d3.svg .
var lineFunction = d3.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; });