4

私はD3、svg、およびjavascript全般に比較的慣れていないので、ご容赦ください:]

プロットとグラフを作成するために D3 を試しています。D3 を使用して小さなプロットを作成し、IE8 と互換性を持たせようとしています。これは、多かれ少なかれ機能する私のグラフのビルドへのリンクです。

http://jsfiddle.net/kingernest/YDQR4/1/

いくつかの調査の後、IE8 で D3 を実行する唯一の方法は、D3 と組み合わせて他の API を使用することであることにすぐに気付きました。幸いなことに、誰かがすでに「r2d3」というプロジェクトに何らかの作業を行っていることを発見しました。これは、私の理解では、SVG (明らかに IE8 ではサポートされていませんでした) を使用する代わりに IE8 ウィンドウでキャンバスをペイントするために raphael を使用しています。

画面に描かれたアイテムを手に入れることができました。これで半分の戦いです。ただし、特にツールチップに多くの問題があります。私のツールチップは、データ サークルのホバー時に浮動して位置/不透明度を変更する DIV コンテナーとして記述されています。これは他のブラウザでは問題なく動作するようですが、r2d3 では動作しませんでした。これは、div ツールチップを外部 (#main div) で作成していることが原因であると思われます。ただし、ツールチップを SVG コンテナー内に配置しようとしましたが、役に立ちませんでした。その後、さらに調査を行い、div コンテナーをタグ内にラップする必要があることを発見しましたが、これをいくつか試した後でも、ツールチップを IE で正しく機能させることができませんでした。を SVG グループ () でラップしようとしましたが、代わりにこのオブジェクトの位置を変更しました。

この時点で、私は行き詰まっており、ツールチップをうまく実装する方法について何か提案があるかどうか疑問に思っていました. また、関数内で d3.select(this) を使用すると、特定のデータ ポイント (この場合は円) を選択しようとすると、そのアイテムの属性にアクセスまたは変更しようとすると、多くの問題が発生するように見えることにも気付きました。しかし、これはまったく別の問題だと思います。

どんな助けでも大歓迎です！

現在ツールチップを作成している方法の例:

 //Create tooltip element
 var tooltip = d3.select("#main")
     .append("div")
         .attr("class", "tooltip")
     .style("position", "absolute")
     .style("z-index", "10")
     .style("opacity", 0);

function mousemove()
{    //Move tooltip to mouse location
    return tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");                            
}

//Mouseover function for circles, displays shortened tooltip and causes other circles to become opaque
function mouseover()
{
    var myCircle = d3.select(this);

    d3.select(this).attr("class", "dataCircleSelected");    //Color circle green

    tooltip.html(    //Populate tooltip text
        "Username: " + d3.select(this).attr("username") + "<br/>" +
        "Session ID: " + d3.select(this).attr("sessionid") + "<br/>" + 
        "Impact CPU: " + d3.select(this).attr("impact")            
    )
    .transition()
    .duration(250)
    .style("opacity", .7);

    //After 1000ms, make other circle opaque
    svg.selectAll("circle")
    .filter(function(d, i){    //return every other circle
        return !d.compare(myCircle[0][0].__data__);
    })
    .transition().delay(1000)
    .style("opacity", .2);

}
4

1 に答える 1

0

ここで説明されているように、HTML タグの xhtml 名前空間を使用して明示的に使用してforeignObjects みましたか (の代わりにforeignObject書き込みます): SVG 内の HTML 要素が表示されません?xhtml:divdiv

これにより、ツールチップの定義にそのようなものが得られます

var tooltip = d3.select("#main").append("foreignObject")
     .append("xhtml:div")
         .attr("クラス", "ツールチップ")
     .style("位置", "絶対")
     .style("z-index", "10")
     .style("不透明度", 0);
于 2013-03-05T01:22:47.743 に答える