javascript - D3 SVG マウスのドラッグで要素の配列を強調表示したい

Question

それぞれが長方形といくつかのテキスト要素を水平方向の配列に含む多数の要素を持つ SVG コンテナがあります。

1 つの要素をクリックして、他の要素にドラッグしたい。最初の要素とドラッグされた要素が強調表示されます。これは、通常のテキスト エディターの選択と同じです。

最後に、選択された最初と最後の要素を知りたいので、それらのデータにアクセスできます。

d3ドラッグ動作を使用してこれを試しましたが、1.中間要素を強調表示できません2.ドラッグエンドは、どの要素が最終要素であるかを教えてくれません。

マウスイベントも使用してみましたが、1.各中間アイテムを強調表示できますが、マウスを最初に戻すと、強調表示を簡単に削除できません。2. マウスがコンテナの外に出た場合、強調表示された要素を残してマウスアップ イベントを見逃す可能性があります。3. マウス オーバー イベントをすべて収集しない限り、どの要素で終了しているかはまだわかりません。

選択した要素を実際に移動したくはありません。選択された最初と最後の要素を知っているだけです。

問題を説明するために、このフィドルを作成しました: http://jsfiddle.net/avowkind/up54b/5/

HTML

<svg class='demosvg' version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink" >
    <rect width="400" height="220"></rect>
    <g id="container" transform="translate(10,10)"></g>
</svg>

Javascript

var mydata = [1, 2, 3, 4, 5];
/* each box is a group with a rect and text 
   positioned according to the data value
   on drag/drop we want to know the dragged element, and the one it is dropped on.
   we would like to highlight all the intervening elements too.

   Ultimately we just want a result e.g. 2 was dragged to 5
*/
var boxg = d3.select('#container').selectAll('g').data(mydata).enter()
    .append('svg:g')
    .attr('id', function (d, i) {
        return "b" + d;
    })
    .attr('transform', function (d, i) {  return "translate(" + d * 50 + ",80)";})
    .call(d3.behavior.drag()
        .on("dragstart", function (d, i) {d3.select(this).classed("selected", true); })
        .on("drag", function (d, i) {
            // which element are we over here - to highlight it
            var el = document.elementFromPoint(d3.event.x, d3.event.y);
            console.log(el);
        })
        .on("dragend", function (d, i) {
            console.log(d);
            console.log(this);
            console.log(d3.event);
            // turn off all highlights
            d3.selectAll('#container g').classed("selected", false);

        // Which box got dropped on here ? 
    })
);

boxg.append('svg:rect')
    .classed('box', true)
    .attr('width', 40).attr('height', 40);

boxg.append('svg:text')
    .text(function(d,i) { return d; })
    .attr('dx', 15).attr('dy', 20);

CSS

.demosvg {  fill:silver;}
.box { fill:lightblue;}
text { fill:black;} 
.selected  .box{ fill:gold;}

ありがとうアンドリュー