d3.js Modifica il path forma esistente

immettere qui la descrizione dell'immagine

Sto provando a sviluppare uno strumento di ricerca – where un utente disegnerà un path ei nodes che esistono in quella zona appariranno. In questa parte dell'applicazione vorrei modificare il path esistente.

http://jsfiddle.net/Cbk9J/6/

function editShape(){ console.log("edit shape", points1); var svg = d3.select("#g-1"); var circle = svg.selectAll("circle") .data(points, function(d) { return d; }); circle.enter().append("circle") .attr("r", 1e-6) .on("mousedown", function(d) { selected = dragged = d; redraw(); }) .transition() .duration(750) .ease("elastic") .attr("r", 6.5); circle //.classd("selected", function(d) { return d === selected; }) .attr("cx", function(d) { return d[0]; }) .attr("cy", function(d) { return d[1]; }); circle.exit().remove(); } $('.edit').click(function(e) { e.preventDefault(); editShape(); }); 

Questo è il mio esempio che desidero prendere alcune idee da – punti di cerchio sui bordi, oggetti mobili che ridisegnano la forma sul mousemove.

http://jsfiddle.net/4xXQT/156/


immettere qui la descrizione dell'immagine

Ho aggiunto il codice di modifica in questo esempio, ma ci sono 2 problemi. 1. Sembra essere un punto cerchio aggiuntivo. 2. La forma svg sta aggiungendo un nuovo svg in contrapposizione a modificare l'attuale svg – Ho provato a passarlo, ma si interrompe http://jsfiddle.net/Cbk9J/31/

Si lamenta della lunghezza se cerco di passare all'attuale svg.

 /* var svg = d3.select("#g-1") .attr("width", width) .attr("height", height) .attr("tabindex", 1); */ var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .attr("tabindex", 1); 

immettere qui la descrizione dell'immagine

Ho aggiunto un toggle all'editor di forma – ma ancora buggy – non voglio davvero creare nuovi punti di cerchio – e sembra ancora avere troppi punti cerchio / path incompleto – tutti i suggerimenti

**** CODICE PIU 'PIÙ ********** http://jsfiddle.net/Cbk9J/70/

ecco la function di ridisegno

  function redraw() { svg.select("path").attr("d", line); var circle = svg.selectAll("circle") .data(points, function(d) { return d; }); circle.enter().append("circle") .attr("r", 1e-6) .on("mousedown", function(d) { selected = dragged = d; redraw(); }) .transition() .duration(750) .ease("elastic") .attr("r", 6.5); circle .classd("selected", function(d) { return d === selected; }) .attr("cx", function(d) { return parseInt(d[0], 10); }) .attr("cy", function(d) { return parseInt(d[1], 10); }); circle.exit().remove(); if (d3.event) { d3.event.preventDefault(); d3.event.stopPropagation(); } }