我希望在节点上鼠标悬停时制作像stroke-dash一样的直线动画。鼠标移出时,此动画应停止。
当我搜索时,我得到了一个代码。
var totalLength = path.node().getTotalLength();path
.attr("stroke-dasharray", totalLength + " " + totalLength)
.attr("stroke-dashoffset", totalLength)
.transition()
.duration(2000)
.ease("linear")
.attr("stroke-dashoffset", 0);
为什么我要制作动画直到鼠标移开并在鼠标移出时停止。
答案 0 :(得分:1)
var graph = {
"nodes": [{
"name": "1",
"rating": 90,
"id": 2951,
"x": 90,
"y": 50,
"fixed": true
}, {
"name": "2",
"rating": 80,
"id": 654654,
"x": 50,
"y": 50,
"fixed": true
}, {
"name": "3",
"rating": 80,
"id": 6546544,
"x": 50,
"y": 90,
"fixed": true
},
],
"links": [{
"source": 1,
"target": 0,
"value": 6,
"label": "publishedOn"
}, {
"source": 1,
"target": 2,
"value": 6,
"label": "publishedOn"
}, {
"source": 1,
"target": 0,
"value": 4,
"label": "containsKeyword"
},
]
}
var margin = {
top: -5,
right: -5,
bottom: -5,
left: -5
};
var width = 500 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
var color = d3.scale.category20();
var force = d3.layout.force()
.charge(-200)
.linkDistance(50)
.size([width + margin.left + margin.right, height + margin.top + margin.bottom]);
var zoom = d3.behavior.zoom()
.scaleExtent([.1, 1])
.on("zoom", zoomed);
var drag = d3.behavior.drag()
.origin(function(d) {
return d;
})
.on("dragstart", dragstarted)
.on("drag", dragged)
.on("dragend", dragended);
var svg = d3.select("#map").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.right + ")").call(zoom);
var rect = svg.append("rect")
.attr("width", width)
.attr("height", height)
.style("fill", "none")
.style("pointer-events", "all");
var container = svg.append("g");
//d3.json('http://blt909.free.fr/wd/map2.json', function(error, graph) {
force
.nodes(graph.nodes)
.links(graph.links)
.start();
var movement = 200;
var link = container.append("g")
// .attr("class", "links")
.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function(d) {
return Math.sqrt(d.value);
})
//.attr("transform", function(d) {
// return "translate(" + movement + "," + 0 + ")";
//})
.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; })
;
var node = container
.selectAll(".node").append("g")
.data(graph.nodes)
.enter().append("g")
.attr("class", "node")
.attr("cx", function(d) {
return d.x;
})
.attr("cy", function(d) {
return d.y;
})
.call(drag)
;
node.append("circle")
.attr("r", function(d) {
return d.weight * 2 + 12;
})
.style("fill", function(d) {
return color(1 / d.rating);
})
//.attr("transform", function(d) {
// return "translate(" + movement + "," + 0 + ")";
//})
//.call(drag)
; //Here you move the nodes
force.on("tick", tick);
function tick(){
//force.on("tick", function() {
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("transform", function(d) {
//Here i create a node radius so it doesnt go offscreen
var nodeRadius = d.weight * 2 + 12
//here I do checks to see if it goes offscreen
if(d.x<= nodeRadius){
d.x = nodeRadius;
}
if(d.y<= nodeRadius){
d.y = nodeRadius;
}7
if(d.x>width - nodeRadius){
d.x = width - nodeRadius;
}
if(d.y>height - nodeRadius){
d.y = height - nodeRadius;
}
return "translate(" + d.x + "," + d.y + ")";
});
}
var linkedByIndex = {};
graph.links.forEach(function(d) {
linkedByIndex[d.source.index + "," + d.target.index] = 1;
});
function isConnected(a, b) {
return linkedByIndex[a.index + "," + b.index] || linkedByIndex[b.index + "," + a.index];
}
node.on("mouseover", function(d) {
link.attr("stroke-dasharray", 10 + " " + 10)
.attr("stroke-dashoffset", 500)
.transition()
.duration(2000)
.ease("linear")
.attr("stroke-dashoffset", 0);
node.classed("node-active", function(o) {
thisOpacity = isConnected(d, o) ? true : false;
this.setAttribute('fill-opacity', thisOpacity);
return thisOpacity;
});
link.classed("link-active", function(o) {
return o.source === d || o.target === d ? true : false;
});
d3.select(this).classed("node-active", true);
d3.select(this).select("circle").transition()
.duration(750)
.attr("r", (d.weight * 2 + 12) * 1.5);
})
.on("mouseout", function(d) {
link.attr("stroke-dasharray", 0).attr("stroke-dashoffset", 0);
node.classed("node-active", false);
link.classed("link-active", false);
d3.select(this).select("circle").transition()
.duration(750)
.attr("r", d.weight * 2 + 12);
});
function dottype(d) {
d.x = +d.x;
d.y = +d.y;
return d;
}
function zoomed() {
container.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
function dragstarted(d) {
d3.event.sourceEvent.stopPropagation();
d3.select(this).classed("dragging", true);
force.start();
}
function dragged(d) {
force.stop();
d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
tick();
}
function dragended(d) {
d.fixed = true;
//d3.select(this).classed("dragging", false);
tick();
}
&#13;
.node {
stroke: #fff;
stroke-width: 1.5px;
}
.node-active{
stroke: #555;
stroke-width: 1.5px;
}
.link {
stroke: #555;
stroke-opacity: .3;
}
.link-active {
stroke-opacity: 1;
}
.overlay {
fill: none;
pointer-events: all;
}
#map{
border: 2px #555 dashed;
width:500px;
height:400px;
}
&#13;
<link href="https://code.jquery.com/ui/1.10.4/themes/black-tie/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="map"></div>
&#13;
希望你正在寻找这个,
代码说明 在鼠标悬停功能中,我已添加以下代码行
link.attr("stroke-dasharray", 10 + " " + 10)
.attr("stroke-dashoffset", 500)
.transition()
.duration(2000)
.ease("linear")
.attr("stroke-dashoffset", 0);
以上我用&#34; 10 10&#34;设置stroke-dasharray属性。这将使行以虚线样式显示,如 - - - - ,next 设置stroke-dashoffset为500这个值会使破折号更快地移动意味着值在2000毫秒的时间跨度内改变0到500,这在转换的持续时间(2000)中提到你可以看到。 转换完成后,我将stroke-dashoffset更改为0以使其成为行,
此外,在mouseout功能中,我已添加到行
之下link.attr("stroke-dasharray", 0).attr("stroke-dashoffset", 0);
这将使线条再次从虚线变为单线。
并进行更多观察 鼠标移动到任何圆圈后,动画将开始播放并持续2秒,但如果您将鼠标悬停在圆圈上,则可以在2秒内看到之前激活且仍在运行的动画。因此,您可以选择是否播放动画2秒钟,希望您了解更改此值的位置, 还有一件事是当你想把它作为一条线时, 激活mouseout时或动画完成后立即执行。 需要注意这两件事。
希望你能理解每一件事,如果不是问我。 好的。由于时间和系统可用性,我昨天可能已经这样做了。