D3は1つの呼び出しで異なるSVG図形を描画します。可視性はありません

Question

私はsvg図形の情報を格納するオブジェクトを持っています。オブジェクトデータによると、

Shapes = { 
     id: <Shape ID>, 
     objType: <Tag Name of Shape e.g ellipse or line>, 
     Coordinates: < Object Containing relevant data for drawing >, 
     Style: <Object Containing relevant data for styling>, 
} 

Examples for Coordinates and Style could be: 
Shapes.Coordinates = { 
    x1: 10, // for Lines 
    y1: 10, 
    x2: 100, 
    y2: 100, 
} 

Shapes.Coordinates = { 
    cx: 10 ,// for Circles 
    cy: 10, 
    r: 10, 
} 

Shapes.Style = { 
    fill: "black", 
    stroke: "red", 
    "stroke-width": 10 
} 

は、今私はD3コールが異なる形状を描画するために、与えられたデータを利用したい：それは、以下の構造を有しています。これまでの私の最善のアイデアは、次のコードになります：

最初に、IDとイベントのみの属性を持たないすべての図形を作成します。

let objectsRender = svg.selectAll("line") 
         .data(data) 
         .enter() 
         .append(function(d) { 
         return document.createElement(d.objType); 
         }) 
         .attr("id", function(d){ return prefix +d._id;}) 
         .attr("class", "no-attr") 
         .on("click",(d)=>{this.modeClick(d);}); 

それから私は、私は良い解決策はないと思う右のIDを、見つけるために、forループを使用して、2番目の呼び出しで属性を追加します。私はこれまでのところ、この一時的な解決策は、その関連する属性を持つすべての図形を作成するクラスno-attr

let objectsAttributes= svg.selectAll(".no-attr").each(function(){ 
    let id= d3.select(this).attr("id"); 
    let d = null; 
    d = data[0]; 

    for(i = 0;i < props.data.length; i++){ 
     if(id == prefix +props.data[i]._id){ 
     d = props.data[i]; 
     break; 
     } 
    } 

    if(d !== null){ 
    d3.select(this) 
     .attr(d.coordinates) 
     .attr(d.style) 
     .attr("class", null); 
    } 

で任意のタグを探すことにより、「空」のSVGタグを見つけることができます。 しかし、シェイプは表示されません。追加呼び出しに関連しています。

     .append(function(d) { 
         return document.createElement(d.objType); 
         }) 

誰もがよりよい解決策を提案するかを教えてもらえます、なぜ私のSVGは、開発ツールを通じて、私のブラウザウィンドウに表示さが、表示されませんか？

Answer 1

SVG要素をdocument.createElementで作成することはできません。そのメソッドはhtml要素のみを作成できます。

SVG要素がdocument.createElementNS（「http://www.w3.org/2000/svg」、<要素名>）を介してSVG名前空間に作成する必要がありますので、私はあなたが

.append(function(d) { 
     return document.createElementNS('http://www.w3.org/2000/svg', d.objType); 
}) 

ブラウザのツールがことを示しているのでしょう、あなたのケースで推測本当に必要なSVG要素と同じ名前のhtml要素を作成しましたが、html要素は機能しません。