5

D3 javascriptライブラリを使用して、いくつかの基本的なWebチャートをレンダリングしています。<path>ブロックに3つの要素を追加したいのです<svg>が、D3は<html>代わりにブロックの最後に要素を追加しています。完全なhtmlソースは次のとおりです。

<!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><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>ブロックはブロックの外側にあります。<svg>このエラーを修正して、それらが属する場所に配置するにはどうすればよいですか？

4

2 に答える 2

5

まず、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-01T23:47:24.470 に答える
4

同様の問題を抱えている将来の訪問者の場合：

この場合（および同様の他の場合）の動作の違いは、新しいグループを作成するという事実に依存しているselectように見えます。selectAllselectAll

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

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

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

またparentNode、（経験的に）enter選択のappendedノードが接続されているノードであるように見えます。

selectこれが、観察された動作を生成しselectAll、問題を修正した理由です。

于 2014-07-30T14:05:26.030 に答える