1

チュートリアルhereをたどろうとしていますが、ギャップを埋めるのに十分なコードが提示されていません。

これは、同じことを達成するために私が取り組んでいるフィドルです。d3 がロードされていますが、アニメーションの遷移は同時に発生していません。 JQuery セレクターを使用します。では、どこで間違っているのでしょうか、それとも船に乗り遅れているのでしょうか?

// example code doesn't work
var circle = svg.selectAll("circle");
circle.style("fill", "steelblue");
circle.attr("cy", 90);
circle.attr("r", 30);

// this does, but animations don't work
d3.selectAll('circle').style("fill", "steelblue");
d3.selectAll('circle').attr("cy", 90);
d3.selectAll('circle').attr("r", 30);

私は最終的に d3 のトゥイーンを活用しようとしていますが、基本を理解することはできません。事前にご協力いただきありがとうございます....

4

2 に答える 2

2

サンプル コードでは、svg は以前に d3 選択オブジェクトに割り当てられています。

 var svg = d3.select("#chart-2").append("svg")
      .attr("width", w)
      .attr("height", h);

したがって、元の例のように、子要素を選択するために使用できます。

例えば。あなたのフィドルは次のように書き直すことができます:

var svg = d3.select("#svg");

//svg is now a d3.selection object.
svg.on("click", function() {
    var circle = svg.selectAll("circle");
    circle.style("fill", "steelblue");
    circle.attr("cy", 90);
    circle.attr("r", 30);
});

d3 を使用したイベントのバインドに関する注意事項:

無名関数内:

  • イベントはバインドされていますd3.event
  • d3.selection オブジェクトではなく、dom 要素がバインドされていますthis
  • 関数に引数を渡すと、要素に結合されたデータにバインドされます。

実際にはコードではありませんが、私が何を意味するかを示す必要があります:

var someD3Selection = d3.select("#someElement");

someD3Selection.on("click", function(boundData) {
    d3.event.preventDefault(); // <-- here's the event
    this; // <-- the actual dom element which is selected in someD3Selection
    d3.select(this); // <-- same as someD3Selection.
});
于 2013-04-11T01:33:07.597 に答える
1

これはあなたが探しているものですか？継続時間はオプションですが、少し遅い方が何が起こっているかを簡単に確認できます。

$('#svg').on('click', function() {
    d3.selectAll('circle').style("fill", "grey").transition().duration(5000).style("fill", "steelblue").attr("cy", 90).attr("r", 30);
});
于 2013-04-10T17:50:35.650 に答える