У меня есть массив данных, который отмечает верхнюю точку фигуры. Каждый состоит из двух наклонных линий.
Поскольку это составная фигура, я использовал selectAll и append path для создания двух наклонных линий. Однако я не знаю, как передать данные, чтобы повторить такую форму в местах, указанных x и y в массиве данных. Код можно найти здесь или ниже
<!DOCTYPE html>
<meta charset="utf-8" />
<style></style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var margin = {
top: 10,
right: 10,
bottom: 10,
left: 10
},
width = 900 - margin.left - margin.right,
height = 600 - margin.top - margin.bottom;
var svg = d3
.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//top point of the shape
var data = [{
x: 0,
y: 0
}, {
x: 300,
y: 100
}, {
x: 500,
y: 150
}]
//line ends for drawing two lines
var topPoints = [
[
[20, 100],
[0, 200]
],
[
[20, 100],
[40, 200]
]
];
function generatePoint(x, y) {
return [
[
[x +20, y+100],
[x, y+200]
],
[
[x +20, y+100],
[x +40, y+200]
]
]
}
var generatedPoint = data.map(d =>
generatePoint(d.x, d.y))
svg.selectAll('.line')
.data(topPoints)
.enter()
.append('path')
.attr('d', d => {
return d3.line()(d)
})
.attr("stroke", "black")
</script>
</body>
Как мне изменить код или есть лучший способ организовать данные для этой цели? Спасибо.