3

KineticJSとD3.jsを使って以下を作成しました。KineticJSを使用して、ユーザーがドットの1つにカーソルを合わせたときにツールチップをポップアップできるようにしました。ただし、キャンバスの境界のため、ツールチップが途切れて表示されます。クリップされないようにこれを表示する方法はありますか？

コード全体はかなり巨大で、無関係なものがたくさん含まれているので、関連するスニペットを投稿しました。

    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);

ここに画像の説明を入力してください

4

1 に答える 1

5

残念ながら、ツールチップがキャンバスに描画されている場合はそうではありません。もちろん、htmlを使用してツールチップを作成するか、代わりにキャンバスのtitle属性を使用することもできます。

于 2012-08-23T19:02:52.080 に答える