更新 d3.js 散点图的缩放域

Question

我正在根据以下示例创建可缩放的散点图：

Scatterplot

D3 Scatterplot Example

What Career Should I Invest In?

我添加了一个按钮，用于将 x 轴的类别从卡路里更改为碳水化合物，图表已正确更新。但是当我尝试使用新域进行缩放时，缩放使用的是旧域。如何更新新域的缩放功能？

可以找到当前的实现 here。

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);
  }

你只需更改一行：

  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

更新 d3.js 散点图的缩放域

Update zoom domain for d3.js scatterplot

scatter-plot

d3.js

semantic-zoom