如何使用d3.js更新svg路径 [英] How to update an svg path with d3.js
问题描述
我想应用官方文档中的常规更新模式更新鼠标的svg路径事件（但可以是一个按钮或其他）。
I'd like to apply the "general update pattern" from official documentation to update an svg path on the mouse event (but could be a button or whatever).
但是路径只是添加和不更新。我认为这是为什么我没有正确使用输入和退出属性，但经过一些各种试验，我不能管理
But the the path is only added and not updated. I think it's why I'm not properly using the enter and exit property but after some various trial, I cannot manage to let it work.
以下是 jsfiddle 。
我的js代码在这里：
var shapeCoords = [
[10, 10], [100, 10], [100, 100], [10, 100]
];
$(function() {
var container = $('#container');
// D3
console.log("D3: ", d3);
var svg = d3.select('#container')
.append('svg:svg')
.attr('height', 600)
.attr('width', 800);
var line = d3.svg.line()
.x(function(d) { return d[0]; })
.y(function(d) { return d[1]; })
.interpolate('linear');
function render() {
svg.data(shapeCoords)
.append('svg:path')
.attr('d', line(shapeCoords) + 'Z')
.style('stroke-width', 1)
.style('stroke', 'steelblue');
}
render();
var mouseIsDown = false;
container.on('mousedown mouseup mousemove', function(e) {
if (e.type == 'mousedown') {
mouseIsDown = true;
shapeCoords[3] = [e.offsetX, e.offsetY];
} else if (e.type == 'mouseup' ){
mouseIsDown = false;
shapeCoords[3] = [e.offsetX, e.offsetY];
} else if (e.type == 'mousemove') {
if (mouseIsDown) {
shapeCoords[3] = [e.offsetX, e.offsetY];
render();
}
}
});
});
和html：
<!DOCTYPE html>
<html>
<head>
<title>D3 mousemove</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script type="text/javascript"
src="http://mbostock.github.com/d3/d3.js">
</script>
<script type="text/javascript" src="script.js"></script>
<style>
#container {
width: 800px;
height: 600px;
border: 1px solid silver; }
path, line {
stroke: steelblue;
stroke-width: 1;
fill: none;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
推荐答案
您的代码未选择现有元素，因此而不是通过 update 选择更新现有路径的d属性，它每次都会附加一个新路径。此版本的 render（）产生了预期的行为。有关选择的详情此处。
Your code isn't selecting an existing element, so instead of updating the "d" attribute of an existing path via the update selection, it's appending a new path each time. This version of render() produced the expected behavior. More on selections here.
function render() {
path = svg.selectAll('path').data([shapeCoords])
path.attr('d', function(d){return line(d) + 'Z'})
.style('stroke-width', 1)
.style('stroke', 'steelblue');
path.enter().append('svg:path').attr('d', function(d){return line(d) + 'Z'})
.style('stroke-width', 1)
.style('stroke', 'steelblue');
path.exit().remove()
code> path 上执行的操作将通过 .data（）仅适用于更新选择。意思是，只有那些在新连接下仍然具有相应数据元素的现有元素。当调用 enter（）。append（）时，它将为每个数据元素添加一个新的元素，而没有预先存在的元素，然后仅对这些元素应用以下操作。
Once you run the data join on path via .data(), operations performed on path will only apply to the update selection. Meaning, only those existing elements that still have corresponding data elements under the new join. When you call enter().append() it will append a new element for every data element without a pre-existing element, and then apply the following operations only to those elements.
在上面，上面的第一个 path.attr（）在 path.enter（）之后应用的那些应用于新元素。它不在上面的代码段中，但 enter（）将更多选择添加到输入选择： path 调用 enter（）后将应用于现有元素和新元素。
In the above, the first path.attr() above operates only on existing elements; those applied after path.enter() apply only to new elements. It's not featured in the snippet above, but enter() adds the enter selection to the update selection: any operations on path after calling enter() would apply to both existing and new elements.
这篇关于如何使用d3.js更新svg路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
