присваивать новый атрибут id каждому созданному элементу

Как назначить атрибут id каждому добавлению круга, чтобы впоследствии использовать круги по его идентификатору. На данный момент я могу клонировать круг на перетаскивании с любым идентификатором.присваивать новый атрибут id каждому созданному элементу

Демо: https://jsbin.com/zuxetokigi/1/edit?html,output

Код:

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <title>JSP Page</title> 
    </head> 
    <body> 
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.js"></script> 
     <script> 
      svg = d3.select("body").append("svg") 
        .attr("width", 960) 
        .attr("height", 500); 

      circle1 = svg.append("circle") 
        .attr("id", "circleToClone") 
        .attr("cx", 100) 
        .attr("cy", 100) 
        .attr("r", 20); 

      var drag = d3.behavior.drag() 
        .origin(function() 
        { 
         var t = d3.select(this); 
         return {x: t.attr("cx"), y: t.attr("cy")}; 
        }) 

        .on('dragend', function (d) { 
         var mouseCoordinates = d3.mouse(this); 
         if (mouseCoordinates[0] > 120) { 
          //Append new element 
          var circle2 = d3.select("svg").append("circle") 
            .classed("drg", true) 
            .attr("cx", 100) 
            .attr("cy", 100) 
            .attr("r", 20) 
            .attr("cx", mouseCoordinates[0]) 
            .attr("cy", mouseCoordinates[1]) 
            .style("fill", "green"); 
         } 
        }); 
      circle1.call(drag); 
     </script> 
    </body> 
</html>

источник

2015-07-13 kittu

Попробуйте использовать [общий шаблон обновления] (http://bl.ocks.org/mbostock/3808218) и массив объектов, предназначенных для составления списка объектов. Эти объекты могут быть как угодно, отображение выполняется через обратные вызовы в функции attr. Удачи! –

Я точно не знаю, почему вы хотели бы сделать это, но если вы хотите, чтобы все круги уникальный идентификатор, вы можете использовать функцию для создания GUID/UUID («Глобально уникальный идентификатор») для каждого круга.

Вы можете добавить следующую функцию из Salvik Meltser's GUID/UUID function в код (в любом месте до функции drag):

function guid() { 
    function _p8(s) { 
     var p = (Math.random().toString(16)+"000000000").substr(2,8); 
     return s ? "-" + p.substr(0,4) + "-" + p.substr(4,4) : p ; 
    } 
    return _p8() + _p8(true) + _p8(true) + _p8(); 
}

И тогда, когда вы добавляете новый круг, просто использовать .attr("id", guid()) для создания нового идентификатора для круг.

var circle2 = d3.select("svg").append("circle") 
    .attr("id", guid()) 
    .classed("drg", true) 
    ...

источник

2015-07-13 11:14:06

присваивать новый атрибут id каждому созданному элементу

ответ

Смежные вопросы