1
私は、Androidのd3.jsを使用して（apache cordovaを使用して）ビジュアライゼーションを作成しようとしています。要素間にリンク（例：行）を作成する可能性があります。d3.js 1つの要素から別の要素への線を作成するためにタッチアンドホールド
、それがどのように動作するかを：
- タッチ及び第二の要素
- に開始要素に
- ドラッグを保持する新しいリンクは今2との間に形成されなければならない
をリリース要素。私はマウスイベントを使用してこれを比較的容易に達成することができますが、私はタッチサポートを使用して同じことを達成するのが難しいです。
これは私が直面している問題を示す最小の例です。
var width = 350,
height = 600,
colors = d3.scale.category10();
var nodeData =
[
{ id: 1, x: 50, y: 50 },
{ id: 2, x: 200, y: 50 },
{ id: 3, x: 125, y: 150 }
];
var svg = d3.select('body')
.append('svg')
.attr('width', width)
.attr('height', height);
var node = svg.selectAll('g')
.data(nodeData)
.enter()
.append('g');
node.append('circle')
.attr('cx', function (d) { return d.x; })
.attr('cy', function (d) { return d.y; })
.attr('r', 30)
.attr('fill', 'red')
.on('touchstart', function (node) {
})
.on('touchend', function (node) {
});
node.append('text')
.attr('fill', 'white')
.attr('x', function (d) { return d.x; })
.attr('y', function (d) { return d.y; })
.text(function (d) { return d.id; });<script src="https://d3js.org/d3.v3.min.js"></script>この例ではtouchendイベントは常にtouchstartと同じ要素上で実行されると、私はタッチの上に素子を得るための方法を見つけることができませんでした操作が終了しました。
d3.jsの使用を開始したばかりなので、助けてください。移動イベントは、エンドノードが定義される円を、「ヒット」した場合
svg.on('touchmove', function() {
var p = d3.touches(this)[0];
endNode = undefined;
cs.each(function(d) {
var self = d3.select(this),
x = d.x - p[0],
y = d.y - p[1],
l = Math.sqrt(x * x + y * y),
r = 30;
if (l < r) {
endNode = d;
}
});
});
：あなたがヒット（衝突）検出を使用するように切り替えることができ
乾杯