0

質問の 1 つの方法は次のとおりです。d3 規則に準拠するように、この例をリファクタリングするにはどうすればよいですか? （コードも以下に含まれています）

つまり、私が持っているように書くのではなく:

rotateTransition(line1, 90)

私は次のようなものを書きたいと思います：

line1.transition().attr("rotation-around-origin", 90)

質問は次のとおりです:私の例のようなカスタムトランジションでd3のトランジションを拡張する適切な方法は何ですか? または:「線」選択オブジェクトにモンキーパッチを適用するにはどうすればよいですか?

ボーナス質問: 6 ～ 16 行目で、まったく同じ初期化で 2 つの「行」選択を作成します。別の選択に基づいて選択を複製する d3 メソッドはありますか? 何かのようなもの：line2 = line1.dup()

上記にリンクされている例のソース コード:

var centerX = centerY = 50
var radius = 200

var svg = d3.select("svg").attr("width", 600).attr("height",600)

var line1 = svg.append("line")
  .attr("x1", centerX)
  .attr("y1", centerY)
  .attr("x2", centerX + radius)
  .attr("y2", centerY);

var line2 = svg.append("line")
  .attr("x1", centerX)
  .attr("y1", centerY)
  .attr("x2", centerX + radius)
  .attr("y2", centerY);

line1.attr("transform", "translate(100,100) rotate(45 50 50)");

function rotateTransition(line, degrees) {

  var rotationString = function(angle, x1, x2) { return "rotate("+angle+" "+x1+" "+x2+")" };
  var retInterpolator, startAngle = 0, endAngle = degrees;
  var transformStart = line.attr("transform") ? line.attr("transform") : "";
  var curRotation = transformStart.match(/rotate\((\d+) /)

  if (curRotation)
    endAngle = parseInt(curRotation.pop()) + degrees;
  else
    transformStart += rotationString(0,line.attr("x1"),line.attr("y1"));

  var transformEnd = transformStart.replace(/(.*rotate\()(\d+)( .*)/,"$1"+endAngle+"$3")
      console.log(transformStart);
  console.log(transformEnd);
  line.transition()
  .duration(2000)
  .attrTween("transform", function() {
    return d3.interpolateString(transformStart, transformEnd);
  })
}

rotateTransition(line1, 90)
rotateTransition(line2, 45)
4

1 に答える 1

1

両方の質問については、ここでd3のselection.call()方法を見てください。

線の回転の場合、rotateTransition体を変える必要さえありません。次のように使用します。

line1.call(rotateTransition, 90)

本当に唯一の違いは、このアプローチでは関数呼び出しを連鎖させることができるということです。

より深く掘り下げたい場合は、一般教育のために、d3ソースコードをチェックして、d3.svg.axis()実装方法を確認してください。このcall()メソッドは、d3選択に軸を適用するときに組み合わせて使用​​されるためです。

于 2013-03-01T20:11:23.790 に答える