d3更改和更新轴域散点图

Question

我正在使用d3制作散点图，需要在点击按钮时能够更新y轴的区间。以下是我目前的代码，这是最小值和最大值。

yAxis = d3.scaleLinear().rangeRound([height, 0]);  
yAxis.domain([23500, 29600]);

当我点击按钮时，如何将域更改为例如 domain([26500, 33600])？

我需要在按钮上添加一个点击函数来实现吗？

d3.select('#data2010').on('click', function () {

还有没有一种自动查找最低和最高值并更新它的方法？

- Dutch Masters

Answer 1

这是一个简单的示例，说明如何更新域并重新调整轴比例。

1. 你需要从用户那里获取一些内容，才能知道何时重新调整轴。因此，该点击事件必须来自某种输入模式，例如按钮、单选框、复选框等。

2. 首先，您需要更新用于 y 轴的比例尺的范围。

3. 使用类似以下代码可以实现，调用 .transition() 和 .duration() 设置轴在用户想要重新调整时的过渡时间：

当按钮被点击时，可以通过以下方式完成上述操作（调用函数）:

function rescale() {
  y.domain([26500, 33600])

  svg.selectAll("g.yaxis")
    .transition().duration(1000)
    .call(d3.axisLeft(y));
}

请查看下面的工作代码片段：

var margin = {
    top: 20,
    right: 80,
    bottom: 30,
    left: 50
  },
  width = 500 - margin.left - margin.right,
  height = 400 - margin.top - margin.bottom;

var svg = d3.select("body").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var y = d3.scaleLinear().range([height, 0]);

y.domain([23500, 29600]);

svg.append("g")
  .attr("class", "yaxis")
  .call(d3.axisLeft(y));

function rescale() {
  y.domain([26500, 33600])

  svg.selectAll("g.yaxis")
    .transition().duration(1000)
    .call(d3.axisLeft(y));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.8.0/d3.min.js"></script>

<button onclick="rescale();">Rescale</button>

- sparta93