数据操作:如何从数据数组追加路径?

我想将路径附加到 d3.selection。因此，我使用selection.data()将数据绑定到新元素。没问题。我的数据是一个对象数组，带有一个名为 'points 的键，它是一个 [x， y] 坐标数组。我可以画圆圈，因为圆只需要一个点(当然(，但是一旦我去路径，需要不止一个点，我不知道该怎么做。因为 data(( 只返回一个点。我需要一种方法来获取以前的数据((

索引.html

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src="https://d3js.org/d3-selection.v1.min.js"></script>
<script src="https://d3js.org/d3-drag.v1.min.js"></script>

<script src="https://d3js.org/d3-color.v1.min.js"></script>
<script src="https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src="https://d3js.org/d3-ease.v1.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src="https://d3js.org/d3-selection.v1.min.js"></script>
<script src="https://d3js.org/d3-timer.v1.min.js"></script>
<script src="https://d3js.org/d3-transition.v1.min.js"></script>
<script src="https://d3js.org/d3-zoom.v1.min.js"></script>
<script src="https://d3js.org/d3-polygon.v1.min.js"></script>
<script src="https://d3js.org/d3-path.v1.min.js"></script>
<script src="https://d3js.org/d3-shape.v1.min.js"></script>

</head>
<body>
<script src="init.js"></script>
<script src="drawIt.js"></script>
<script src="functions.js"></script>
<script src="polygons.js"></script>
</body>

多边形.js

blocks = [
{ name: 'chambre', x: 0, y: 0, points: [[0,0], [100,100], [245, 45], [63,55]] },
{ name: 'salon', x: 0, y: 0, points: [[50,50], [150,150], [255, 455], [63,555]] },
];
drag = d3.drag()
.on("drag", function(d) {
d.x = d3.event.x;
d.y = d3.event.y;
draw();
});
function draw() {
console.log(this)
g = plan.selectAll("g")
.data(blocks);
room = g.enter().append("g")
.call(drag);
g.attr("transform", function(d) { return "translate("+d.x+","+d.y+")"; });
room.append("polygon")
.attr("points",function(d) { 
return d.points.map(function(d) {
return [d[0],d[1]].join(",")
}).join(" ")
})
.attr("fill", "pink")
.attr('stroke', 'black')
room.selectAll('path')
.data(blocks => blocks.points)
.enter()
.append('circle')
.attr('cx', d => d[0])
.attr('cy', d => d[1])
.attr('r', 3)
.attr('stroke', 'red')
.attr('stroke-width', 5)
}
draw()

你只需要两样东西：

线路生成器;
将整个points数组作为每个<path>的数据传递。

由于您有一个数组数组，而不是对象，因此线生成器可以像以下那样简单：

const lineGenerator = d3.line();

此外，对于data方法，我们可以将所有数组放在单个数组points：

blocks.map(d=>d.points)

以下是使用您的数据的演示：

const blocks = [
{ name: 'chambre', x: 0, y: 0, points: [[0,0], [100,100], [245, 45], [63,55]] },
{ name: 'salon', x: 0, y: 0, points: [[50,50], [150,150], [255, 455], [63,555]] },
];

const svg = d3.select("svg");
const lineGenerator = d3.line();
const lines = svg.selectAll(null)
	.data(blocks.map(d=>d.points))
.enter()
.append("path")
.attr("d", lineGenerator);

path {
fill: none;
stroke: black;
stroke-width: 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="300" height="600"></svg>

请记住，对于正确的折线图，必须对数据数组进行排序：

const blocks = [
{ name: 'chambre', x: 0, y: 0, points: [[0,0], [100,100], [245, 45], [63,55]] },
{ name: 'salon', x: 0, y: 0, points: [[50,50], [150,150], [255, 455], [63,555]] },
];

const svg = d3.select("svg");
const lineGenerator = d3.line();
const lines = svg.selectAll(null)
	.data(blocks.map(d=>d.points.sort((a,b)=> a[0] - b[0])))
.enter()
.append("path")
.attr("d", lineGenerator)
.style("stroke", (_,i)=> i ? "red" : "blue")

path {
fill: none;
stroke-width: 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="300" height="600"></svg>

相关内容

最新更新

热门标签：