Добавление события OnClick в граф принудительного макета D3

Я пытаюсь добавить событие OnClick к узлам графа силового макета, но когда я пытаюсь щелкнуть по ним, ничего не происходит. Я считаю, что это потому, что я не использую элемент svg, а .on("click", click) работает только с элементами svg, я думаю, но я не совсем уверен. Вот код, который я пытаюсь реализовать:

var node = svg.selectAll(".node")
.data(nodes)
  .enter().append("circle")
.attr("r",function(d) {return d.size})
  .style("fill",function(d) {return color(d.type);})
.on("click", click)
  .call(force.drag);

  node.append("title")
  .text(function(d){return d.name;});

  force.on("tick", function(){
  node.attr("cx", function(d){return d.x;})
    .attr("cy", function(d) {return d.y;});

  link.attr("x1", function(d){return d.source.x;})
    .attr("y1", function(d){return d.source.y;})
    .attr("x2", function(d){return d.target.x;})
    .attr("y2", function(d) {return d.target.y;});
});


function click() {
   d3.select(this).select("circle").transition()
     .duration(750)
     .attr("r", 30)
     .style("fill", "lightsteelblue");
      }

Когда я пытаюсь нажать на узел, ничего не происходит. Я не уверен что делать. Я думаю, что проблема связана с:

.enter().append("circle")

Я думаю, что это должен быть элемент svg, например («g») или («svg»), но я не мог этого понять. Любые советы или предложения будут оценены. Спасибо!


person nocodaoh.2013    schedule 24.06.2014    source источник
comment
Я не думаю, что вам нужно .select("circle") в click(). Перетаскивание работает, только не переход? Было бы проще диагностировать, если бы у вас был JSFiddle.   -  person mdml    schedule 24.06.2014
comment
Ты был прав. .select(circle) был ненужным. Спасибо!   -  person nocodaoh.2013    schedule 24.06.2014
comment
Большой! Это была единственная проблема?   -  person mdml    schedule 24.06.2014
comment
Да, это была единственная проблема для этой конкретной проблемы. Я пытаюсь сделать так, чтобы имя отображалось при щелчке сейчас.   -  person nocodaoh.2013    schedule 25.06.2014
comment
Хорошо, я разместил комментарий как ответ. Если у вас есть другие проблемы, вы всегда можете опубликовать их как другой вопрос.   -  person mdml    schedule 25.06.2014


Ответы (1)


У вас есть лишний .select("circle") в click(). Вместо этого он должен начинаться только с:

function click(){
    d3.select(this).transition()...
}
person mdml    schedule 24.06.2014