我想创建简单的形状图。当我单击该形状时，它应该会创建一个新形状。例如，如果我单击三 Angular 形的顶部，我希望新的出现在当前三 Angular 形的顶部，如果我单击右侧，新的出现在右侧等。我是 d3js 的新手所以我正在苦苦挣扎如何获取我单击的多段线的数据？现在，我设法创建了一个函数，它应该为我做这件事，如果我手动设置多段线的新坐标，它就会做。它创建形状，但我无法获取数据来操纵它以绘制另一个形状。另外，如果有人建议我如何管理不同的绘图(单击顶部时，在顶部绘图等...)，那就太好了。
<!DOCTYPE HTML>
<html>
<head>
<script src="http://d3js.org/d3.v3.js"></script>
</head>
<h1>Hello world</h1>
<body>
<svg width="1000" height="667"></svg>
<script>
scaleX = d3.scale.linear()
.domain([-10,10])
.range([75,125]),
scaleY = d3.scale.linear()
.domain([-10,10])
.range([187.5,125]);
var o = [];
poly = [{"x":30, "y":15},
{"x":40,"y":35},
{"x":50,"y":15}];
poly2 = [{"x":50, "y":15},
{"x":60,"y":35},
{"x":70,"y":15}];
poly3 = [{"x":60, "y":35},
{"x":70,"y":15},
{"x":90,"y":35}];
var tab = [];
cir = [{"x": 50,"y":15,"r": 5}];
o.push(poly);
o.push(poly2);
tab.push(cir);
function draw()
{
var cords = [0, 0]
d3.select("svg")
.selectAll("polyline")
.data(o)
.enter().append("polyline")
.attr("points",function(d) {
return d.map(function(d) { return [scaleX(d.x),scaleY(d.y)].join(","); }).join(" ");})
.attr("stroke","black")
.on("mouseover", function(d) { d3.select(this).style("fill", "red") })
.on("mouseout", function(d) { d3.select(this).style("fill", "black") })
.on("click", function(d)
{
appendTriangle(d);}
)
.attr("stroke-width",2);
}
function appendTriangle(triangle)
{
var newTriangle = [{x:triangle.x,y:triangle.y},
{x:triangle.x,y:triangle.y},
{x:triangle.x,y:triangle.y}];
o.push(newTriangle);
draw();
}
function appendTriangle2()
{
var newTriangle = [{"x":60, "y":35},
{"x":70,"y":15},
{"x":90,"y":35},];
o.push(newTriangle);
draw();
}
draw();
</script>
最佳答案
您的数据(d，在appendTriangle 函数中称为triangle)是对象的数组，而不是一个对象。
因此，您应该像这样使用索引:
var newTriangle = [{
x: triangle[0].x,
y: triangle[0].y
}, {
x: triangle[1].x,
y: triangle[1].y
}, {
x: triangle[2].x,
y: triangle[2].y
}];
当然，您可以通过编程方式完成:
var newTriangle = [];
triangle.forEach(function(d) {
newTriangle.push({
x: d.x,
y: d.y
})
});
这是一个展示它的演示(我将多边形移动 20 像素，因此新的多边形不会覆盖前一个):
scaleX = d3.scale.linear()
.domain([-10, 10])
.range([75, 125]),
scaleY = d3.scale.linear()
.domain([-10, 10])
.range([187.5, 125]);
var o = [];
poly = [{
"x": 30,
"y": 15
}, {
"x": 40,
"y": 35
}, {
"x": 50,
"y": 15
}];
poly2 = [{
"x": 50,
"y": 15
}, {
"x": 60,
"y": 35
}, {
"x": 70,
"y": 15
}];
poly3 = [{
"x": 60,
"y": 35
}, {
"x": 70,
"y": 15
}, {
"x": 90,
"y": 35
}];
var tab = [];
cir = [{
"x": 50,
"y": 15,
"r": 5
}];
o.push(poly);
o.push(poly2);
tab.push(cir);
function draw() {
var cords = [0, 0]
d3.select("svg")
.selectAll("polyline")
.data(o)
.enter().append("polyline")
.attr("points", function(d) {
return d.map(function(d) {
return [scaleX(d.x), scaleY(d.y)].join(",");
}).join(" ");
})
.attr("stroke", "black")
.on("mouseover", function(d) {
d3.select(this).style("fill", "red")
})
.on("mouseout", function(d) {
d3.select(this).style("fill", "black")
})
.on("click", function(d) {
appendTriangle(d);
})
.attr("stroke-width", 2);
}
function appendTriangle(triangle) {
var newTriangle = [];
triangle.forEach(function(d) {
newTriangle.push({
x: d.x + 20,
y: d.y - 20
})
});
o.push(newTriangle);
draw();
}
function appendTriangle2() {
var newTriangle = [{
"x": 60,
"y": 35
}, {
"x": 70,
"y": 15
}, {
"x": 90,
"y": 35
}, ];
o.push(newTriangle);
draw();
}
draw();<script src="https://d3js.org/d3.v3.min.js"></script>
<svg width="1000" height="667"></svg>PS:请记住，我只回答了您的一个问题，这是主要问题，“如何从 d3js 折线获取数据？” .关于新元素的位置，请问另一个问题:在 StackOverflow 上，在同一个问题中询问多个问题过于宽泛。
关于javascript - 如何从 d3js 折线获取数据？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47240433/