D3：svgコンテナに単純なパスを追加できません

単純なsvgコンテナにパスを追加する際には成功しません。代わりに私の "path"要素をテキストと見なします。それはfollが付属していますD3：svgコンテナに単純なパスを追加できません

<path d="M314,352L314,352C314,352,314,352,..."></path>

として代わりに新しいパス要素を持つの

// Create the SVG 
 
var tracer = {}; 
 
tracer.$container = document.getElementById('container'); 
 

 
tracer.$svg = $('<svg class="svg-d3-table" style="width:100%; height:100%">'); 
 
tracer.$container.append(tracer.$svg); 
 

 
// Specify the path points 
 
var pathInfo = [{x:0, y:60}, 
 
       {x:50, y:110}, 
 
       {x:90, y:70}, 
 
       {x:140, y:100}]; 
 

 
// Specify the function for generating path data    
 
var pathLine = d3.line() 
 
       .x(function(d){return d.x;}) 
 
       .y(function(d){return d.y;}) 
 
       .curve(d3.curveBasis); 
 

 
// Append path 
 
tracer.$svg.append("path") 
 
      .attr("d", pathLine(pathInfo)) 
 
      .attr("stroke", "white") 
 
      .attr("stroke-width", 8) 
 
      .attr("fill", "none");

：ここ

は私のコードです：

<svg class="svg-d3-table" style="..." d="M0,60L8.3,68.3.7,...">path</svg>

私は何をしないのですか？

PS：申し訳ありませんが、私はC++から来ており、非常に基本的なjs操作で苦労することがあります。

ありがとうございました。こんにちは。

出典

2017-01-26 Swork

SVGを使いこなすときにjQueryを使用しないでください。これはSVG名前空間を扱うためのものではなく、多くの頭痛の原因となる可能性があります。以下では、あなたの問題について詳しく説明します：[* "svg要素で動作しないjqueryの追加？"]（/ q/3642035） – altocumulus

d3、jQueryとvanilla jsの混在は非常に扱いにくく、混乱します...なぜd3のみを使用してSVGを作成しないのですか？ –

コメントに他の人が指摘したように、jqueryとd3を混ぜて使用しないでください。

あなたの問題の根

はしかし、あなたの tracer.$svgが jqueryのセレクタですが、あなたは d3セレクタとしてそれを扱っているということです。どちらも appendメソッドを持っていますが、2つの全く異なる獣です（@altocumulusが指摘するように、jqueryは操作上SVGをうまく使いません）。

は、ここで私はちょうどd3でそれを書くと同じようにあなたのコードです：高積雲へ

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="[email protected]" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div id="container" style="background-color: steelblue"></div> 
 
    <script> 
 
    // Create the SVG 
 
    var tracer = {}; 
 
    tracer.$container = d3.select('#container'); 
 

 
    tracer.$svg = tracer.$container.append("svg") 
 
     .attr("class", "svg-d3-table") 
 
     .style("width", "100%") 
 
     .style("height", "100%"); 
 

 
    // Specify the path points 
 
    var pathInfo = [{ 
 
     x: 0, 
 
     y: 60 
 
    }, { 
 
     x: 50, 
 
     y: 110 
 
    }, { 
 
     x: 90, 
 
     y: 70 
 
    }, { 
 
     x: 140, 
 
     y: 100 
 
    }]; 
 

 
    // Specify the function for generating path data    
 
    var pathLine = d3.line() 
 
     .x(function(d) { 
 
     return d.x; 
 
     }) 
 
     .y(function(d) { 
 
     return d.y; 
 
     }) 
 
     .curve(d3.curveBasis); 
 

 
    // Append path 
 
    tracer.$svg.append("path") 
 
     .attr("d", pathLine(pathInfo)) 
 
     .attr("stroke", "white") //<-- need a color? 
 
     .attr("stroke-width", 8) 
 
     .attr("fill", "none"); 
 
    </script> 
 
</body> 
 

 
</html>

出典

2017-01-26 12:17:20 Mark

ありがとう：

jquery's append not working with svg element? はまさに私がより良い探していた情報の一種でありますDOMを操作することの理解（しかし、フロントエンドの開発がどれくらい手応えがあるかはまだ分かっています）。

ヘラルド・ファータドためにありがとう：既存のプロジェクトに取り組んでいたときに実際に

異なるlibにリード線を必要と簡単に混乱行動へとなりますが処理するために、ハードJS（コードを読み取ることによって、名前空間をどのように決定するか、衝突を避けます...あなたはadvicedとして

）

私はD3を使用して、私のSVGを管理することで、私の問題を扱っ：

tracer.$svg = tracer.capsule.$svg = d3.select("#" + tracer.defaultName) 
 
             .append("svg") 
 
             .attr("width", "100%") 
 
             .attr("height", "100%") 
 
             .attr("id", tracer.defaultName + "-svg") 
 
             .attr("class", "svg-d3-table") 
 
             .attr("xmlns", "http://www.w3.org/2000/svg");

あなたのコメントをいただき、ありがとうございます。

出典

2017-01-26 12:56:37 Swork

D3：svgコンテナに単純なパスを追加できません

答えて

関連する問題