D3更新工具提示HTML

Question

我有以下HTML

                <div id="tooltip" className="hidden">
                   <table>
                        <thead>
                        <tr>
                            <td colSpan="3">
                                <strong id="headDate"></strong>
                            </td>
                        </tr>
                        </thead>
                        <tbody id="toolTipBody">
                        </tbody>
                    </table>
                </div>

正常工作的D3代码下方：

                // ToolTip
                d3.select('#tooltip')
                    .classed("hidden", false)
                    .style("left", d3.event.pageX + "px")
                    .style("top", d3.event.pageY + "px")
                    .select('#headDate').text(d0.date);

我需要将D3中的HTML注入/附加到#toolTipBody元素的工具提示中。它需要是动态的，因为行数和行的名称可以改变（否则我可以硬编码HTML并只使用D3 .select＆amp; .text来进行更新。

我如何将以下内容添加到#toolTipBody

                        <tr>
                            <td className="legend-color-guide"><div></div></td>
                            <td id="key">1.0E-6MHz</td>
                            <td id="value">46.50</td>
                        </tr>

感谢 亚当

Answer 1

您可以动态更改HTML部分，如下所示。

 d3.select('#tooltip').html(newHTML);

参考：https://github.com/d3/d3-3.x-api-reference/blob/master/Selections.md#html

演示 - （鼠标悬停在圆圈上）

var testData = [{
  data: [{
    key: "1.0E-6MHz",
    value: "46.50"
  }, {
    key: "2.0E-6MHz",
    value: "50.50"
  }],
  date: "Apr 10",
  color: "red"
}, {
  data: [{
    key: "1.0E-6MHz",
    value: "46.50"
  }, {
    key: "2.0E-6MHz",
    value: "50.50"
  }, {
    key: "1.8E-6MHz",
    value: "10.50"
  }],
  date: "Feb 19",
  color: "green"
}];

d3.select("svg")
  .selectAll(".node")
  .data(testData)
  .enter()
  .append("circle")
  .attr("r", 5)
  .attr("cx", function(d, i) {
    return (i + 1) * 100
  }).attr("cy", 50)
  .on("mouseover", function(d) {
    d3.select('#tooltip')
      .classed("hidden", false)
      .style("left", d3.event.pageX + "px")
      .style("top", d3.event.pageY + "px")
      .select('#headDate').text(d.date);

    var newHtml = [];
    d.data.forEach(function(h) {
      newHtml.push('<tr>',
        '<td id="key">' + h.key + '</td>',
        '<td id="value">' + h.value + '</td>',
        '</tr>');
    });

    d3.select('#tooltip')
      .select("#toolTipBody").html(newHtml.join(""))
  })
  .on("mouseout", function(d) {
    d3.select('#tooltip')
      .classed("hidden", true);
  });

#tooltip {
  position: absolute;
  background-color: #cecece;
}

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="tooltip" class="hidden">
  <table>
    <thead>
      <tr>
        <td colSpan="3">
          <strong id="headDate"></strong>
        </td>
      </tr>
    </thead>
    <tbody id="toolTipBody">
    </tbody>
  </table>
</div>
<svg width=400 height=200>
</svg>