d3更改和更新轴域散点图

Question

我正在 d3 中处理散点图，当我单击按钮时，我需要能够更新 yAxis 域。

这就是我现在所拥有的。这是最低值和最高值。

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

当我单击按钮时，如何将域更改为类似域（[26500, 33600]）？

我需要将其添加到具有点击功能的按钮中吗？

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

或者有没有办法自动寻找最低和最高值并更新它？

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

检查下面的工作片段：

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