Выбор динамических элементов DOM в d3

Question

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

http://jsfiddle.net/nilarya/WKa8F/2/ Это то место, где я был до сих пор, я прошу вас взглянуть на него (код несколько грязный, извините, его поздно здесь ... :(), если вы рисуете несколько объекты (круги и/или прямоугольники) на холсте, а затем попытаться выбрать один, вы заметите ошибку.

Я попытался с помощью

d3.select(this) 

, а также

d3.select(this.firstChild) 

но я нужно выберите конкретный круг или прямоугольник. Как мне это сделать?

Answer 1

Обновить ваш прослушиватель dragmove для обработки только выбранной фигуры, то есть формы, к которой привязан этот слушатель. Все, что вам нужно сделать, это назначить выбор this по D3 переменной, и использовать вместо внешних ссылок, например, так:

function dragmove(d) { 
    var shape = d3.select(this); 
    if (isrectMov == true) { 
     shape.attr("x", d3.event.x) 
      .attr("y", d3.event.y) 
      .attr("cursor", "move"); 
    } else if (islineMov == true) { 
     shape.attr("x1", d3.event.x) 
      .attr("y1", d3.event.y) 
      .attr("x2", d3.event.x) 
      .attr("y2", d3.event.y) 
      .attr("cursor", "move"); 
    } else if (iscircleMov == true) { 
     shape.attr("cx", d3.event.x) 
      .attr("cy", d3.event.y) 
      .attr("cursor", "move"); 
    } else {} 
} 

Однако, это будет работать только для подобных форм, то у кода есть еще несколько проблем, которые необходимо решить. Я предлагаю вам начинать с нуля и стараться не использовать глобальные переменные вообще, но вместо этого требуется (или выбрать) любую форму, когда вам это нужно (например, внутри обработчика). Это уменьшит сложность, поскольку вам больше не придется пытаться следить за состоянием каждой переменной в ваших мыслях.

---

Demo