我想在鼠标移动形状时构建一个事件。 SVG形状会跟随路径或线条移动。但我不知道该怎么做。 这是我的代码: Improve this question
编辑
我有两个形状,然后我可以在两个形状之间建立一条线。当我尝试拖动我想要跟随的线的形状可以增加或减少。现在我可以在 JSbin 中的两个形状之间建立一条线,但我不知道当我拖动形状时如何增加或缩短线
最佳答案
您可以使用 d3 执行此操作,但您需要像这样定义数据:
然后使用强制布局来放置节点。 链接和节点将由勾选功能处理。
graph = {
"nodes": [{
"x": 469,//x position of the node
"y": 410, //y position of the node
fixed: true//this is a fixed node
}, {
"x": 493,
"y": 364,
fixed: true
}, {
"x": 442,
"y": 365,
fixed: true
}, {
"x": 467,
"y": 314,
fixed: true
}, ],
"links": [{//link between nodes index 0 and index 1
"source": 0,//this link node @ index 0
"target": 1//this link node @ index 1
}, {
"source": 1,
"target": 2
}, {
"source": 2,
"target": 0
}, {
"source": 1,
"target": 3
}, {
"source": 3,
"target": 2
}, ]
}
对于更多圆圈,将节点添加到上面的图形对象,并相应地更新链接。
完整的工作代码在这里
var width = 960,
height = 500;
var force = d3.layout.force()
.size([width, height])
.charge(-400)
.linkDistance(40)
.on("tick", tick);
//making the drag listener
var drag = force.drag()
.on("dragstart", dragstart).on("dragend", dragend);
//making svg
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
// build the arrow.
svg.append("svg:defs").selectAll("marker")
.data(["end"]) // Different link/path types can be defined here
.enter().append("svg:marker") // This section adds in the arrows
.attr("id", String)
.attr("viewBox", "0 -5 10 10")
.attr("refX", 25)
.attr("refY", -1.5)
.attr("markerWidth", 6)
.attr("markerHeight", 6)
.attr("orient", "auto")
.append("svg:path")
.attr("d", "M0,-5L10,0L0,5");
var link = svg.selectAll(".link"),
node = svg.selectAll(".node");
//data on nodes
graph = {
"nodes": [{
"x": 469,
"y": 410,
fixed: true//this is a fixed node
}, {
"x": 493,
"y": 364,
fixed: true
}, {
"x": 442,
"y": 365,
fixed: true
}, {
"x": 467,
"y": 314,
fixed: true
}, ],
"links": [{//link between nodes
"source": 0,
"target": 1
}, {
"source": 1,
"target": 2
}, {
"source": 2,
"target": 0
}, {
"source": 1,
"target": 3
}, {
"source": 3,
"target": 2
}, ]
}
//using forcelayout
force
.nodes(graph.nodes)
.links(graph.links)
.start();
//making lines
link = link.data(graph.links)
.enter().append("line")
.attr("class", "link").attr("marker-end", "url(#end)");
//making nodes
node = node.data(graph.nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", 12)
.call(drag);
function tick() {
link.attr("x1", function(d) {
return d.source.x;
})
.attr("y1", function(d) {
return d.source.y;
})
.attr("x2", function(d) {
return d.target.x;
})
.attr("y2", function(d) {
return d.target.y;
});
node.attr("cx", function(d) {
return d.x;
})
.attr("cy", function(d) {
return d.y;
});
}
function dragstart(d) {
d3.select(this).classed("fixed", true);
}
function dragend(d) {
d3.select(this).classed("fixed", false);
}
.link {
stroke: #000;
stroke-width: 1.5px;
}
.node {
cursor: move;
fill: #ccc;
stroke: #000;
stroke-width: 1.5px;
}
.node.fixed {
fill: #f00;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
普朗克是 here
希望这有帮助!
关于jquery - 形状移动时如何让线条或路径跟随形状,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34545628/