畫布工具提示出現在畫布外部嗎？

我做了以下使用KineticJS和D3.js。我用KineticJS讓用戶在一個點上懸停時彈出工具提示。但是，由於畫布的邊界，工具提示會被切斷。有沒有一種方法可以讓它在沒有被裁剪的情況下出現？畫布工具提示出現在畫布外部嗎？

整個代碼本身是非常巨大的，含有大量的不相關的東西，所以我張貼的相關片段：

this.stage = new Kinetic.Stage({ 
     container: 'canvas', 
     width: this.WIDTH, 
     height: this.HEIGHT 
    }); 

    this.circlesLayer = new Kinetic.Layer(); 
    this.tooltipLayer = new Kinetic.Layer(); 

    this.stage.reset(); 
    this.stage.clear(); 

    // Some d3 specific code 
    this.xRange.domain([ 
     d3.min(this.data, function(d) { 
     return d.x; 
    }), d3.max(this.data, function(d) { 
     return d.x; 
    })]); 

    this.yRange.domain([ 
     d3.min(this.data, function(d) { 
     return d.y; 
    }), d3.max(this.data, function(d) { 
     return d.y; 
    })]); 

    var axes_transition = d3.select("#" + this.div).transition().duration(1000).ease("exp-in-out") 

    // transition the axes 
    axes_transition.select(".x.axis").call(this.xAxis); 

    // Drawing the circles 
    this.last = this.data.map(this.position); 
    this.last.forEach(this.kineticCircle); 

    // Setting up the tooltip 
    this.tooltip = new Kinetic.Text({ 
     text: "", 
     fontFamily: "Calibri", 
     fontSize: 12, 
     padding: 5, 
     visible: false, 
     fill: "black", 
     //alpha: 0.75, 
     textFill: "white" 
    }); 

    this.tooltipLayer.add(this.tooltip); 

    this.stage.add(this.circlesLayer); 
    this.stage.add(this.tooltipLayer);

enter image description here

來源

2012-08-23 Legend

你不能在畫布元素外畫 – Bergi

請問爲什麼你同時使用KineticJS和d3.js？它們不都是可視化功能，而是面向不同的應用程序？ –

@AndrewMao：是的。然而，如果要呈現的圖形元素的數量超過2000個（例如，svg圈），則d3.js開始絆倒。這就是KineticJS所踢的地方。我能夠成功渲染超過10萬個圈子而沒有任何問題。我可以直接使用KineticJS，但是d3提供了很多很酷的數據操作功能。 – Legend

若該提示是在畫布上繪製的不幸。您當然可以使用html創建工具提示，或者在畫布上使用title屬性。

來源

2012-08-23 19:02:52 Strille

+1謝謝！我剛剛通過增加畫布的大小來解決問題。你能詳細說明我如何使用畫布的title屬性來解決這個問題嗎？你的意思是說我需要爲所有的圈子使用title屬性嗎？ – Legend

是的，所有圈子都使用canvas元素的title屬性。當您在畫布上滾動一個圓時，您將設置title屬性（例如使用jQuery的.attr（）），並且當您推出時將其刪除（例如，使用jQuery的.removeAttr（））。這不是最佳的（你不能設計它等等），但它是有效的。 – Strille

畫布工具提示出現在畫布外部嗎？

回答

相關問題