d3.js - d3.js 散布図のズーム ドメインを更新

Question

次の例に基づいて、ズーム可能な散布図を作成しています。

散布図

D3 散布図の例

どのようなキャリアに投資する必要がありますか?

x 軸のカテゴリを [カロリー] から [炭水化物] に変更するボタンを追加したところ、グラフが正しく更新されました。しかし、新しいドメインでズームしようとすると、ズームは古いドメインを使用します。新しいドメインのズーム機能を更新するにはどうすればよいですか?

現在の実装はここにあります。

Answer 1

新しいスケールを動作に再バインドするだけです。

最初にズーム動作関数を変数に入れて、後でアクセスできるようにします。元のコード...

   var svg = d3.select("#scatter")
.append("svg")
  .attr("width", outerWidth)
  .attr("height", outerHeight)
.append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
  .call(d3.behavior.zoom().x(x).y(y).scaleExtent([0, 500]).on("zoom", zoom));

これである必要があります：

  var zoomBeh = d3.behavior.zoom()
      .x(x)
      .y(y)
      .scaleExtent([0, 500])
      .on("zoom", zoom);

  var svg = d3.select("#scatter")
    .append("svg")
      .attr("width", outerWidth)
      .attr("height", outerHeight)
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
      .call(zoomBeh);

次に、関数の変更で、スケールを動作にバインドします。したがって、代わりに：

  function change() {
    xCat = "Carbs";
    xMax = d3.max(data, function(d) { return d[xCat]; });
    xMin = d3.min(data, function(d) { return d[xCat]; });

    x.domain([xMin, xMax]);

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

    svg.select(".x.axis").duration(750).call(xAxis).select(".label").text(xCat);

    objects.selectAll(".dot").transition().duration(1000).attr("transform", transform);
  } 

1 行を変更するだけです。

  function change() {
    xCat = "Carbs";
    xMax = d3.max(data, function(d) { return d[xCat]; });
    xMin = d3.min(data, function(d) { return d[xCat]; });

    // x.domain([xMin, xMax]);
    zoomBeh.x(x.domain([xMin, xMax])).y(y.domain([yMin, yMax]));

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

    svg.select(".x.axis").duration(750).call(xAxis).select(".label").text(xCat);

    objects.selectAll(".dot").transition().duration(1000).attr("transform", transform);
  }

ドキュメントについては、http://bl.ocks.org/mbostock/3892928を参照してください。