javascript - 我可以在 D3.js SVG 容器中创建 HTML 列表吗

Question

这是我正在处理的代码。我想将某一年的事件绘制为无序列表。

可以使用 d3.js 吗？

代码-

var mevent = svg.append("text")
        .attr("class", "year mevent")
        .attr("text-anchor", "end")
        .attr("y", height - 450)
        .attr("x", width - 300)
        .attr("width", 1000)
        .attr("height", 200)
        .text("");


  // Updates the display to show the specified year.
  function displayYear(year) {
    dot.data(interpolateData(year), key).call(position).sort(order);
    year = Math.round(year);
    label.text(year);
    price.text("$ " + iacprices[year]);
    mevents_text = "";
    for (var i = 0; i < (mevents[year]).length; i++) {
        mevents_text = "*" + mevents_text 
        + (mevents[year])[i];
    }
    mevent.text(mevents_text);

Answer 1

是的，您可以将 HTML 元素放在带有foreignObject的 SVG 中。

带 d3 的示例