nki*_*int 17 javascript svg d3.js
我想从官方文档中应用"常规更新模式"来更新鼠标事件的svg路径(但可以是按钮或其他).
但路径只是添加而不是更新.我认为这就是为什么我没有正确使用enter和exit属性,但经过一些不同的试验,我无法让它工作.
这是一个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>
Sea*_*ter 14
您的代码不是选择现有元素,因此不是通过update选择更新现有路径的"d"属性,而是每次都附加一个新路径.此版本render()产生了预期的行为.更多关于这里的选择.
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()
在pathvia 上运行数据连接后.data(),执行的操作path将仅适用于更新选择.意思是,只有那些在新连接下仍然具有相应数据元素的现有元素.当您调用enter().append()它时,将为每个数据元素附加一个没有预先存在的元素的新元素,然后仅对这些元素应用以下操作.
在上文中,上面的第一个path.attr()仅对现有元素起作用; 那些path.enter()仅适用于新元素后应用的.它不在上面的代码段中,但enter()将输入选择添加到更新选择中:path调用后的任何操作enter()都将应用于现有元素和新元素.
请尝试以下代码，我认为这是您想要的。问题是因为要更新元素时要区分enter、update和exit，否则会一次又一次地添加数据。
$(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');
svg.data(shapeCoords)
.append('svg:path')
.attr('d', line(shapeCoords) + 'Z')
.style('stroke-width', 1)
.style('stroke', 'steelblue');
function render() {
var svg = d3.select('#container').select("svg").selectAll('path').data(shapeCoords);
svg.enter().append('svg:path')
.attr('d', line(shapeCoords) + 'Z')
.style('stroke-width', 1)
.style('stroke', 'steelblue');
svg.attr('d', line(shapeCoords) + 'Z')
.style('stroke-width', 1)
.style('stroke', 'steelblue');
svg.exit().remove();
}
render();