我想制作线条动画,例如将鼠标悬停在节点上时运行描边划线。当鼠标移出时,该动画应停止。
当我搜索时,我得到一个代码。
var totalLength = path.node().getTotalLength();path
.attr("stroke-dasharray", totalLength + " " + totalLength)
.attr("stroke-dashoffset", totalLength)
.transition()
.duration(2000)
.ease("linear")
.attr("stroke-dashoffset", 0);
我如何制作动画直到鼠标悬停并在鼠标移出时停止。
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();
}
.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;
}
<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>
希望您正在寻找这个,
代码说明在鼠标悬停功能中,我在代码行下方添加了
link.attr("stroke-dasharray", 10 + " " + 10)
.attr("stroke-dashoffset", 500)
.transition()
.duration(2000)
.ease("linear")
.attr("stroke-dashoffset", 0);
上面我用“ 10 10”设置stroke-dasharray属性,这将使行以虚线样式显示,如----,接下来将stroke-dashoffset设置为500,该值使破折号移动得更快,意味着值更改为0至上面的transition duration(2000)中提到的在2000毫秒的时间范围内为500。转换完成后,我将stroke-dashoffset更改为0,使其成为直线,
而且在mouseout功能中,我在下面添加了
link.attr("stroke-dasharray", 0).attr("stroke-dashoffset", 0);
这将使各行再次从虚线变为单行。
为了进一步观察,一旦将鼠标悬停到任何圆圈上,动画就会开始播放,并持续2秒钟,但是如果您将鼠标悬停到该圆圈上,则动画会在2秒钟内看到动画,该动画先前已激活并且仍在运行。这样一来,您就可以选择是否播放动画2秒钟,希望您了解在哪里更改此值,还有另一件事是当您将鼠标悬停后立即将其设置为单行时或动画制作完成后。这两个事情需要注意。
希望你理解每件事,如果不问我。好的,由于时间和系统可用性,我昨天可能会这样做。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句