D3はエッジブラウザでHTMLが動作しない

d3を使用して作成されたチャートでは、Chromeでうまく動作するHTMLを使用する必要がありますが、エッジはHTMLを表示せず、なぜその理由がわかりません。D3はエッジブラウザでHTMLが動作しない

Here is a JSFiddle that shows the issue、Chromeで動作しますが、エッジに..ここで

はフィドルのコードではありません。

<!DOCTYPE html> 
<body> 
<div id="chart"></div> 
    <script src="//d3js.org/d3.v3.min.js"></script> 
    <script> 
    (function(d3) { 
    'use strict'; 

    var dataset = [ 
     { label: 'Abulia', count: 10 }, 
     { label: 'Betelgeuse', count: 20 }, 
     { label: 'Cantaloupe', count: 30 }, 
     { label: 'Dijkstra', count: 40 } 
    ]; 

    var width = 360; 
    var height = 360; 
    var radius = Math.min(width, height)/2; 

    var color = d3.scale.category20b(); 

    var svg = d3.select('#chart') 
     .append('svg') 
     .attr('width', width) 
     .attr('height', height) 
     .append('g') 
     .attr('transform', 'translate(' + (width/2) + 
     ',' + (height/2) + ')'); 

    var arc = d3.svg.arc() 
     .outerRadius(radius); 

    var pie = d3.layout.pie() 
     .value(function(d) { return d.count; }) 
     .sort(null); 

    var path = svg.selectAll('path') 
     .data(pie(dataset)) 
     .enter() 
     .append('path') 
     .attr('d', arc) 
     .attr('fill', function(d, i) { 
     return color(d.data.label); 
     }); 
     svg.append("text") 
      .attr('y', 0) 
     .attr('x', 100) 
     .data(['some text']) 
     .attr("text-anchor", "middle") 
     .attr('font-size', '20px') 
     .attr('font-weight', 'bold') 
     .attr('fill', 'white') 
     .text(function(d) { 
      return d; 
     }); 
    svg.append("text") 
    .attr('y', 0) 
     .attr('x', -100) 
     .data(['some html &deg;']) 
     .attr("text-anchor", "middle") 
     .attr('font-size', '20px') 
     .attr('font-weight', 'bold') 
     .attr('fill', 'white') 
     .html(function(d) { 
      return d; 
     }); 
    })(window.d3); 


    </script> 
</body>

私も試してみました：

svg.append("foreignObject") 
    .attr('y', 0) 
     .attr('x', -100) 
     .data(['some html &deg;']) 
     .attr("text-anchor", "middle") 
     .attr('font-size', '20px') 
     .attr('font-weight', 'bold') 
     .attr('fill', 'white') 
        .attr('width', width) 
     .attr('height', height) 
     .html(function(d) { 
      return d; 
     });

As per Q/A here

出典

2016-06-27 sethreidnz

が確認されました。エッジは.htmlを表示しません。私はOperaとChromeでは見ることができますが、Edge（25）ではなくIE（11）、IE（9） – Klaujesi

でもそれを見ることができます。 .. – sethreidnz

SVGシンボルを使用することができます。最初にあなたのシンボルを定義して（必要に応じて使用します） – Klaujesi

実際に含むテキストの出力を破る2個のエラーがあります。度の記号。

注：最初の1は、SVGコンテンツに使用されるものではないselection.html()の使用であり、その名の通り、selection.htmlのみHTML要素でサポートされています。 SVG要素やHTML以外の要素は、innerHTMLプロパティをサポートしていないため、selection.htmlと互換性がありません。

HTMLエンティティ、つまり度合い記号を挿入したかったので、その方法を選択したとします。以下で説明する理由により、これは他の手段によって達成することができ、使用方法はSVGコンテンツで動作するように.text()に変更することができます。

2番目のエラーは、HTMLエンティティ（°）の使用で、not defined for SVGsです。代わりに、Unicode escape sequence\u00b0を度数記号として使用することもできます。

svg.append("text") 
    // ... 
    .data(['some html \u00b0']) // Use Unicode escape sequence instead of HTML entity 
    // ... .attr("", "") 
    .text(function(d) {   // Use .text() instead of .html() 
    return d; 
    });

JSFiddleをご覧ください。

それはDOMノードをいじる不適切に基づいているので、あなたの最初のアプローチは、実際には、まったくのブラウザで動作するはずです。しかし、Chrome、FF、その他いくつかの機能は、IEが正しく機能しているのに対し、もう少しリラックスしているようです。

出典

2016-06-28 09:22:59 altocumulus

ありがとう、私は既に別のアプローチを実装していますが、今これを使用するように変更しました。私は本当にユニコードを使用しようとしましたが、私はそれが動作するように失敗したために何が間違っていたのか分かりません。ご協力ありがとうございます！ – sethreidnz

引用した文書は間違っています（書かれた時点では正しかったが）。人々はhtml（）を介してSVGを作成しようとし続けていたので、htmlの仕様を変更してこの作業を行い、ほとんどのブラウザに従った。エッジは、おそらくある時点ではおそらくそうではありません。 –

@RobertLongson面白い！スペックの進歩に関する最新の情報を読むことは、常に喜びです！しかし、私はちょっと混乱しています：SVGコンテンツに 'innerHTML 'を使用するのはHTML仕様と関係がありますか？あなたは仕様の変更を参照していますか？私はちょうど間違っているために別のユーザーを騙しました。私はそれから後ろ向きにしなければならないかもしれない。 – altocumulus

をEdgeではサポートされていないようです。初歩的なGoogle検索では、ドキュメントやその他の解説を見つけることができません。

私の場合は、私が必要としたシンボルを作るために、2つの円をそれぞれの上に追加するだけで終わったのです。

svg.append("circle") 
     .attr("cx", degreeSignOffsetX) 
     .attr("cy", degreeSignOffsetY) 
     .attr("r", 2) 
     .style("fill", function(d) { return 'black'; }); 

    svg.append("circle") 
     .attr("cx", degreeSignOffsetX) 
     .attr("cy", degreeSignOffsetY) 
     .attr("r", 1) 
     .style("fill", function(d) { return 'white'; });

は、シンボルを使用してよりよい解決策があるかもしれませんが、これは私のために働いて、それは私の要件を満たしています。他のいくつかのいずれかが、エッジがこれを行うことができますなぜかあれば上の任意の情報を持っていると私は何かが答える気軽に欠けていると私は答えを受け入れる場合

出典

2016-06-28 04:21:21 sethreidnz

D3はエッジブラウザでHTMLが動作しない

答えて

関連する問題