5

マウス ポインターに追従する svg 全体の垂直方向のガイドラインがありますが、現在、その位置の更新が少し遅く、マウスの動きが速い場合に特に顕著です。この遅延を減らす方法はありますか?

現在のコード:

svg.on("mousemove", function(d) {
    svg.select(".guideline")
        .attr("x1", d3.mouse(this)[0]-1)
        .attr("x2", d3.mouse(this)[0]-1);

});

svg.on("mouseover", function(d) {
    svg.append("line")
        .attr("class", "guideline")
        .attr("y1", margin[0])
        .attr("y2", height+margin[0])
        .attr("opacity", originOpacity)
        .attr("stroke", "#333")
        .attr("pointer-events", "none");

});

svg.on("mouseout", function(d) {
    svg.select(".guideline").remove();
});
4

4 に答える 4

3

すべてのマウスムーブで行を選択します。代わりに、行を変数に保持します。

var line = svg.append("line")
        .attr("class", "guideline")
        .attr("y1", margin[0])
        .attr("y2", height+margin[0])
        .attr("opacity", 0)
        .attr("stroke", "#333")
        .attr("pointer-events", "none");

svg.on("mousemove", function(d) {

    line
        .attr("x1", d3.event.pageX-1)
        .attr("x2", d3.event.pageY-1);

});

svg.on("mouseover", function(d) {
  line.attr("opacity", originOpacity);
});

svg.on("mouseout", function(d) {
    line.attr("opacity", 0);
});
于 2012-10-10T23:26:25.883 に答える
3

私は同じ問題を抱えていますが、2つのことに気付きました：

  1. High Charts を見ると、(JS ライブラリに) 同様の垂直方向のガイドラインが実装されており、それほど遅れていません。だからそれは可能です。例を参照してください：ここ

  2. 次のように、SVG 要素を追加したコンテナー要素を使用し、そこにグループ (g) 要素を座標変換/変換と共に追加しました。

HTML:

<div id="d3-container"></div>

JS:

var svg = d3.select("#d3-container")
    .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .attr("id","d3-svg")
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    .attr("id","d3-canvas");

興味深いことに、マウス イベント (最初の回答で上記のコードを使用) をさまざまな要素にバインドすると、パフォーマンスが大きく異なります。「d3-canvas」グループにバインドすると、ガイド ラインが非常に遅くなり、親のsvg要素（「d3-svg」）にバインドすると、すでに高速になり、div（「d3-container」）にバインドすると、最速のパフォーマンスが得られます（まだそうではありませんがただし、High Stock と同じくらい速い）。したがって、座標変換によりマウス イベントに多くのオーバーヘッドが追加されると考えていますが、どういうわけか、D3 または SVG もマウス イベント用に最適化されていません。

于 2012-12-18T18:52:14.167 に答える
3

すべての属性を更新するのではなくmousemove、数ミリ秒の遅延を追加できます。

var lastMove, elapsed;
svg.on("mousemove", function(d) {

    elapsed = Date.now() - lastMove;
    if ( elapsed < 40 ) return;

    svg.select(".guideline")
        .attr("x1", d3.mouse(this)[0]-1)
        .attr("x2", d3.mouse(this)[0]-1);

    lastMove = Date.now();
});

これにより、パフォーマンスは確実に向上しますが、動きがより不安定になります。チェックするミリ秒数で遊んでください。40長すぎる可能性があります。

于 2012-12-18T19:02:37.463 に答える