2

D3と、D3のデータバインディングメカニズムを使用してページに要素をネストまたは追加する方法を学習しています。

http://www.recursion.org/d3-for-mere-mortals/にあるコードを変更しました。svgキャンバスの設定方法を理解し、データをrect、text、line要素にバインドするループも理解しています。

私が理解していないのは、以下への呼び出しselectAll('Anything1/2/3/4')です。それらは明らかに必要ですが、私は正確に何を選択し、データバインディングメカニズムにどのように適合しますか？ありがとうございました。

    <html>
    <head>
        <title>D3 Test</title>
        <script type="text/javascript" src="d3/d3.v2.js"></script>
    </head>
    <body>

        <script type="text/javascript">

var dat = [ { title:"A", subtitle:"a", year: 2006, books: 54, avg:10 },
            { title:"B", subtitle:"b", year: 2007, books: 43, avg:10 },
            { title:"C", subtitle:"c", year: 2008, books: 41, avg:10 },
            { title:"D", subtitle:"d", year: 2009, books: 44, avg:10 },
            { title:"E", subtitle:"e", year: 2010, books: 35, avg:10 } ];

var width    = 560,
    height   = 500,
    margin   = 20,
    innerBarWidth =  20,
    outerBarWidth =  40;


var x = d3.scale.linear().domain([0, dat.length]).range([0, width]);
var y = d3.scale.linear()
    .range([0, height - 2 * margin])
    .domain([ 0 , 100 ]);

var z = d3.scale.category10();

var n = d3.format(",d"),
    p = d3.format("%");

var canvas = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + 2 * margin + "," + margin + ")");

// outerbars
var outerBars = d3.select("svg")
  .selectAll("Anything1").data(dat).enter().append("rect")
  .attr("x", function(datum, index) { return x(index); })
  .attr("y", function(datum) { return height - y(datum.books); })
  .attr("height", function(datum) { return y(datum.books); })
  .attr("width", outerBarWidth)
  .attr("fill", "blue")

// innerbars
var innterBars = d3.select("svg")
  .selectAll("Anything2").data(dat).enter().append("rect")
  .attr("x", function(datum, index) { return x(index)+innerBarWidth/2; })
  .attr("y", function(datum) { return height - y(datum.books)/2; })
  .attr("height", function(datum) { return y(datum.books); })
  .attr("width", innerBarWidth)
  .attr("fill", "red");

// avg references
var barlabels = d3.select("svg")
  .selectAll("Anything3").data(dat).enter().append("line")
  .attr("x1", function(datum, index) { return x(index); })
  .attr("x2", function(datum, index) { return x(index)+outerBarWidth; })
  .attr("y1", function(datum) { return height - y(datum.books)/2; })
  .attr("y2", function(datum) { return height - y(datum.books)/2; })
  .style("stroke", "#ccc");

// titles
var barlabels = d3.select("svg")
  .selectAll("Anything4").data(dat).enter().append("text")
  .attr("x", function(datum, index) { return x(index)+innerBarWidth/2; })
  .attr("y", height )
  .attr("text-anchor", "end")
  .text(function (d) {return d.title} );

        </script>
    </body>
</html>
4

2 に答える 2

3

おそらく、d3で理解するのに最も重要であるが最も難しい概念は、選択です（ブックマークして、APIに精通することを強くお勧めします）。表面的には、選択により、jQueryなどの他の多くのJavaScriptライブラリと同様の機能が提供されます。

jQuery：

var paragraphs = $("p");

d3：

var paragraphs = d3.selectAll("p");

これらの行は両方とも「選択オブジェクト」を作成します。これは基本的に、要素をより適切に制御できる単一のオブジェクトにグループ化されたDOM要素です。他のライブラリと同様に、ライブラリで提供されている関数を使用して、d3でこれらの「選択された」要素を操作できます。

jQuery：

var paragraphs = $("p").css("color", "red");

d3：

var paragraphs = d3.selectAll("p").style("color", "red");

繰り返しますが、表面的にはこれはかなり理解しやすいです。d3を非常に強力なものにしているのは、選択した要素に任意のデータをバインドできるようにすることで、これをさらに一歩進めることができることです。

空白のドキュメントがあり、テキストの2つの段落を追加したいとします。そして、テキストの各段落が配列内の個々の要素に格納されているとします。

var text = ["First", "Second", "Third", "Fourth"];

これらの段落はまだ作成されていないため、次の呼び出しでは空の選択が返されます。

var paragraphs = d3.selectAll("p");
console.log(paragraphs.empty()); // true

paragraphsそれはまだ選択であり、空であることに注意してください。これがd3の基本的なポイントです。データを空の選択範囲にバインドし、そのデータを使用して、入力した選択範囲を使用して新しい要素を追加できます。前の例からやり直して、このプロセスを見ていきましょう。まず、空の選択範囲を作成し、text配列をそれにバインドします。

var paragraphs = d3.select("body").selectAll("p").data(text);

次に、入力選択を使用して、<p>要素を本文に追加します。

paragraphs.enter().append("p").text(function(d) { return d; });

これで、DOMには次のものが含まれます。

<body>
    <p>First</p>
    <p>Second</p>
    <p>Third</p>
    <p>Fourth</p>
</body>

この時点で間違いなく混乱する可能性のあるものはたくさんありますが、これはあなたに良いスタートを与えるはずだと思います。

参照：結合を使用した思考。

于 2012-09-24T21:37:16.027 に答える
1

ここにあなたが始めるためのいくつかの読み物があります：

selectAll、データ、入力、シーケンスの追加を理解する
バインディングデータ：ScottMurrayD3チュートリアル

2番目のリンクからその説明：

答えは、真に魔法のメソッドであるenter（）にあります。この例の最終的なコードは次のとおりです。これについて説明します。

d3.select("body").selectAll("p")
    .data(dataset)
    .enter()
    .append("p")
    .text("New paragraph!");

.selectAll("p")—DOM内のすべての段落を選択します。まだ存在しないため、これは空の選択を返します。この空の選択は、間もなく存在する段落を表すものと考えてください。

基本的には、まだ存在しないDOM要素を選択し、これらの存在しない要素にデータを追加し、データがバインドされた後にそれらを追加します。

于 2012-09-24T00:49:46.333 に答える