javascript - How to update an svg path with d3.js -
i'd apply "general update pattern" official documentation update svg path on mouse event (but button or whatever).
but the path added , not updated. think it's why i'm not using enter , exit property after various trial, cannot manage let work.
here jsfiddle.
my js code here:
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(); } } }); }); and 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>
your code isn't selecting existing element, instead of updating "d" attribute of existing path via update selection, it's appending new path each time. version of render() produced 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() once run data join on path via .data(), operations performed on path apply update selection. meaning, existing elements still have corresponding data elements under new join. when call enter().append() append new element every data element without pre-existing element, , apply following operations elements.
in above, first path.attr() above operates on existing elements; applied after path.enter() apply new elements. it's not featured in snippet above, enter() adds enter selection update selection: operations on path after calling enter() apply both existing , new elements.
Comments
Post a Comment