0

ここでの私の質問は 2 つあります。私はd3とjavascriptに非常に慣れていないので、私の質問が非常に単純に思える場合はご容赦ください。

まず、次のようなデータを含む配列を作成します。

    var data=[
{
    "atomic_number": "1",
    "name": "H",
    "en": "2.2",
    "type": "non-metal"
},
{
    "atomic_number": "3",
    "name": "Li",
    "en": "1",
    "type": "metal"
}
  ]

SVG キャンバスも作成しました。

< svg id = "canvas" xmlns = "LINK" version= "1.1" >

だから私はd3で次のことを行います：

            var selection=canvas.selectAll("circle")
                .data(data_var)

            selection.enter().append("circle")

             selection
                .transition().duration(800)
                    .attr("id", d.name)

私の最初の質問は、データ配列の各要素に attr("id", d.name") を実行してここで行った方法で id を与えることは合法ですか?要素自体のID？

私の 2 番目の質問には 2 つの部分があります。

a- 各要素に id を正しく適用したと仮定すると、後でその要素にアクセスするにはどうすればよいですか? var my_var = d3.select("#id") を実行できますか? 私はそれをやってみましたが、うまくいかないようだったからです。どうにかしてデータ配列から釣り上げる必要がありますか?

b-データ配列のすべての要素が画面上に円として表示されていると仮定します。それらのいずれかをクリックすると、その特定の要素/円で動作する関数が呼び出されるようにするにはどうすればよいですか?

4

1 に答える 1

0

1 番目の質問: あなたが行っていることはほとんど問題ありませんが、質問の内容からすると、何が起こっているのかを少し明確にする必要があるように思われます。

まず、データ要素と要素のグラフィック表現を区別する必要があります。選択を行う (そして data() 呼び出しを使用してデータにバインドする) と、バインドされたデータのグラフィカルな表現 (この場合は svg:circle 要素) を実際に選択します。

ここで少し奇妙なのは、選択に関する移行の呼び出しです。それは間違っていて、奇妙です。非視覚的なプロパティを変更し、そのためにトランジションを使用しているため、奇妙です。なぜそれを行うのかわかりません。第二に、次のような関数で渡す必要がある要素にバインドされたデータにアクセスするのは間違っています。

    .attr("id", function(d) { return d.name;} )

コードを次のように書き直します。

var data = ...;
var selection = canvas.selectAll("circle").data(data);
selection.enter()
  .append("circle")
  ... // Don't forget the attributes that actually set the size/pos of the circle
  .attr("id", function(d) { return d.name; } )

2 番目の質問:

a) はい、確かに ID で好きな要素にアクセスできますが、前のセクションで指摘したエラーのために機能しませんでした。ただし、多くの場合、個々の要素にアクセスする必要はありません。個々の要素で何をしたいのかわからないので、詳しく説明していただければ幸いです。

b) イベント ハンドラーをインストールする必要があります。

selection.enter()
  .append("circle")
  ....
  .on("click", function() { console.log("I was clicked"); });
于 2012-11-01T14:10:24.280 に答える