d3.js编辑现有形状路径 [英] d3.js Edit existing shape path

问题描述

我正在尝试开发一种搜索工具-用户将在其中绘制路径，并且将显示该区域中存在的节点.在应用程序的这一部分中，我想编辑现有路径.

I am trying to develop a search tool - where a user will draw a path and nodes that exist in that area will appear. In this part of the application I would like to edit the existing path.

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
          //.classed("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();
});

这是我的示例，我希望从中获得一些启发-边缘上的圆形点，可移动对象，这些对象在mousemove上重新绘制形状.

This is my example that I wish to take some ideas from - circle points on the edges, movable objects that redraw the shape on mousemove.

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

我已将编辑代码添加到此示例中-但是有2个问题. 1.似乎还有一个附加的圆点. 2. svg形状添加了一个新的svg，而不是编辑现有的svg-我尝试过将其切换，但会中断

I've added the edit code into this example - but there are 2 issues. 1. There appears to be an additional circle point. 2. The svg shape is appending a new svg as opposed to editing the existing svg - I've tried switching it over but it breaks http://jsfiddle.net/Cbk9J/31/

如果我尝试切换到现有的svg，它会抱怨长度.

It complains about length if I try and switch over to the existing 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);

推荐答案

我已在形状编辑器中添加了一个切换按钮-但仍然存在问题-我真的不想创建新的圆点-而且它似乎仍然有太多的圆点/不完整的路径-任何建议

I've added a toggle to the shape editor - but still buggy - I don't really want to create new circle points - and it still seems to have too many circle points/incomplete path - any suggestions

****最新代码********** http://jsfiddle. net/Cbk9J/70/

****LATEST CODE ********** http://jsfiddle.net/Cbk9J/70/

这是重绘功能

   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
        .classed("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();
        }
    }

这篇关于d3.js编辑现有形状路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！