D3：data、enter、appendパターンで外部ブロックにデータを追加する

D3のjavascriptライブラリを使用して基本的なWebチャートを表示しています。ブロック<svg>に3つの<path>要素を追加しますが、D3はブロックを<html>ブロックの最後に追加します。D3：data、enter、appendパターンで外部ブロックにデータを追加する

<html><head><meta charset="utf-8"> 
<style type="text/css"></style></head><body> 
<script src="d3.v2.js"></script> 
<script> 
var chartData = [ 1, 2, 3 ]; 
d3.select("html").select("body").append("svg") 
    .data(chartData, function(d) { console.log("data d:", d); return d; }) 
    .enter() 
    .append("path") 
     .attr("d", function(d) { return d; }); 
</script><svg></svg> 
</body><path d="1"></path><path d="2"></path><path d="3"></path></html>

<svg>ブロックが作成されましたが、何らかの理由で、<path>ブロックはそれの外にある：

<!DOCTYPE html> 
<meta charset="utf-8"> 
<body> 
<script src="d3.v2.js"></script> 
<script> 
var chartData = [ 1, 2, 3 ]; 
d3.select("html").select("body").append("svg") 
    .data(chartData, function(d) { console.log("data d:", d); return d; }) 
    .enter() 
    .append("path") 
     .attr("d", function(d) { return d; }); 
</script> 
</body>

Chromeのデベロッパーコンソールには、結果のHTMLがあることを示しています。ここでは完全なHTMLソースです。このエラーをどのように修正して、それらが属している<svg>の内部に置くことができますか？

出典

2012-12-01 Toby Lael

まず、svgのみを参照する高水準変数が必要です。第二に、SVGを作成するときにSVGの高さと幅を指定する必要があります。あなたはそう、htmlの選択を指定する必要はありません。

var width = 400, 
    height = 300; 
var svg = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height);

今、あなたがパスを追加するsvg変数を使用することができます。パスをグループ化することをお勧めします（最初に"g"が追加されます）。また、追加するデータをパス要素にバインドしたいので、パスの場合はselectAllを実行する必要があります。だから、：

svg.append("g").selectAll("path") 
    .data(chartData) 
    .enter().append("path") 
    .attr("d", function(d) { return d; });

は、私はここD3のチュートリアルをお勧めします。同様の問題を抱え、将来の訪問者のためのhttp://alignedleft.com/tutorials/d3/

出典

2012-12-01 23:47:24 mccannf

ありがとうございました！ '.selectAll（" path "）'は欠けていたキー部分です。 –

：

それは、この場合の動作の違い（と似た他人）が表示されますselect間とselectAllは、selectAllが新しいグループを作成するという事実に基づいています。

D3の選択オブジェクトは、いくつか特別な追加プロパティを持つ配列の配列です。各配列はオブジェクトのグループに対応しています。グループの1つのプロパティは、selectAllが実行されたノードであるparentNodeです。

最も外側の選択がselectである場合、ルートは暗黙的にドキュメントのルートノードです（この場合はhtml）。

selectAllは、一致（またはエントリ）ごとに選択範囲内に新しいグループを作成するので、各グループは、それが由来するノードの親として割り当てられます。 selectでは、新しいグループが作成されないため、のノードの親を正確に表しなくても、各グループのオリジナルparentNodeが保持されます（）。

parentNodeもenter選択append EDノードが結合しているノードである（実験的）が表示されます。

これは、selectが観測された動作を生成し、selectAllがこの問題を解決した理由です。

出典

2014-07-30 14:05:26

downvoter：なぜですか？私は興味がある。 –

D3：data、enter、appendパターンで外部ブロックにデータを追加する

答えて

関連する問題