1

占有セルにカーソルを合わせるとツールチップを作成する共起マトリックスを作成しました。コードは次のとおりです。

div.tooltip {
    position: absolute;
    text-align: left;
    width: 500px;
    color:white;
    padding: 8px;
    font: 13px sans-serif;
    background: black;
    border: solid 1px #aaa;
    pointer-events: none;
}

var div = d3.select("body").append("div")
  .attr("class", "tooltip")
  .style("opacity", 0);

function mousemove(d) {
      div
        .html("Tooltip is here")
        .style("left", (d3.event.pageX) + "px")
        .style("top", (d3.event.pageY) + "px")
  }

function mouseover(p) {
    div.transition()
        .duration(300)
        .style("opacity", 1);
    d3.selectAll(".row text").classed("active", function(d, i) { return i == p.y; });
    d3.selectAll(".column text").classed("active", function(d, i) { return i == p.x; });
}

function mouseout() {
    div.transition()
        .duration(300)
        .style("opacity", 1e-6);
    d3.selectAll("text").classed("active", false);
}

次に、私の要素は関数 mousemove、mouseover、および mouseout を呼び出します。これはすべて正常に機能し、ツールチップは完全に表示されます。私が今やりたいことは、エントリの上にカーソルを置いたときにテーブルを生成し、そのテーブルをツールチップ内に配置することです。私が今持っているコードはテーブルを適切に生成しますが、ツールチップには入れません。代わりに、テーブルはマトリックスの上または下に生成されます。この関数を使用してテーブルを生成しています：

  function tabulate(data, columns) {
      var table = d3.select("body").append("table"),
          thead = table.append("thead"),
          tbody = table.append("tbody");

      // append the header row
      thead.append("tr")
          .selectAll("th")
          .data(columns)
          .enter()
          .append("th")
              .text(function(column) { return column; });

      // create a row for each object in the data
      var rows = tbody.selectAll("tr")
          .data(data)
          .enter()
          .append("tr");

      // create a cell in each row for each column
      var cells = rows.selectAll("td")
          .data(function(row) {
              return columns.map(function(column) {
                  return {column: column, value: row[column]};
              });
          })
          .enter()
          .append("td")
              .text(function(d) { return d.value; });

      return table;
  }

ツールチップ内でテーブルを生成する方法について誰か助けてもらえますか?

4

1 に答える 1

2

現在、

var table = d3.select("body").append("table")

ページの本文全体を選択し、テーブル要素を追加して、テーブルがページの下部に表示されるようにします。

小さな変化を起こし、

var table = div.append("table")

ツールチップ要素を取得してテーブルを追加し、ツールチップ内に表示されるようにします。(ツールチップに「div」よりも少しわかりやすい名前を付けるとよいでしょう)

通常、さまざまな要素がマウスオーバーされたときにツールチップの内容も更新する必要があります。私はあなたがここでそれをしようとしているとは思いませんか？

于 2013-06-13T00:15:25.763 に答える