ここではhttp://ssun.azurewebsites.net/creating-a-draggable-object-in-d3/の素晴らしいチュートリアルで遊んでいます。クリックでドラッグするサークルのアクティブな領域を拡張する最善の方法は何ですか？d3でドラッグするためのオブジェクト境界を延長する
2円、目に見える1と目に見えないものを持っている複雑なオブジェクトを作成するのではなく、目に見えない円がクリックできる場合、私はわからない：私は、次の3つのソリューションが表示されます。おそらく100％透明です。 （それも可能である場合）
ビジュアル部分を越えて円のアクティブ領域を拡張
をマウスカーソルのアクティブ領域を拡張。
残念ながら、私はこれらのことをどうやって行うのか分かりません。どんな助けもありがとう。
私は2つの円のアプローチを好むが、私はg要素にグループにそれらを思います。その後、ドラッグするとg要素上で動作し、第二円はgを拡大するだけである：
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
</head>
<body>
<script>
var boxWidth = 600;
var boxHeight = 400;
var box = d3.select('body')
.append('svg')
.attr('class', 'box')
.attr('width', boxWidth)
.attr('height', boxHeight);
var drag = d3.behavior.drag()
.on('dragstart', function() {
circle.style('fill', 'red');
})
.on('drag', function() {
d3.select(this)
.attr('transform', function(d) {
return "translate(" + d3.event.x + "," + d3.event.y + ")";
});
})
.on('dragend', function() {
circle.style('fill', 'black');
});
var dragCircles = box.selectAll('.draggableCircle')
.data([{
x: (boxWidth/2),
y: (boxHeight/2),
r: 25
}])
.enter()
.append('g')
.attr('class', 'draggableCircle')
.attr('transform', function(d) {
return "translate(" + d.x + "," + d.y + ")";
})
.style('cursor', 'crosshair')
.call(drag);
dragCircles.append("circle")
.attr('r', function(d){
return d.r * 3;
})
.style('fill', 'transparent');
var circle = dragCircles.append("circle")
.attr('r', function(d) {
return d.r;
})
.style('fill', 'black');
</script>
</body>
</html>
また、私は1つの以上の質問にはお邪魔でしょう - 複数の円がある場合は、と私コードは私にd3.select（this）の親オブジェクト "g"を与えます。そこから可視円をどのように参照して変更できますか？それを親オブジェクトの子として参照できますか？ –
@CindyAlmighty 'this.children'は' g 'の中の円の集合です。したがって、 'd3.select（this.children [1]）'は第2の可視円の選択になります。 – Mark