私はグラフを作成しようとしているSVG内にHTML divを追加しようとしています。以下のコードを使用して追加しようとしていますが、Firebugを使用して要素を検査すると、divはrect
要素コード内に表示されますが、グラフUIには表示されません。
私が試みている方法に何か問題があるのですか、SVG内にdivを追加することは不可能ですか?
marker.append("rect")
.attr("width", "50px")
.attr("height", "50px")
.append("div")
.attr("id", function(d) {
return "canvas_" + d.key.split(" ").join("_");
})
.style("width", "50px").style("height", "50px");
HTMLをSVGに追加することはできません(技術的にはforeignObject
でできますが、これはうさぎの穴です)。さらに、SVGの可視要素はネストできないため、circle
、rect
、path
などの要素に子要素を含めることはできません。
オブジェクトをグループ化することで、<g>
と同様の目的を果たす<div>
要素の使用も検討します。 詳細はこちら 。
同じ行に「rect」と「div」を追加しようとしています。おそらくそれがあなたが失敗しているところですD3のこれらのチュートリアルをチェックしてください... SVGに基づいた素晴らしいライブラリ http://alignedleft.com/tutorials/d3/drawing-svgs/