Question

我正在研究d3中的散点图，当我点击按钮时，我需要能够更新yAxis域。

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

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

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

我是否需要通过点击功能将其添加到按钮？

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

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

Answer 1

这是一个关于如何更新域并重新调整轴的简单示例。

您需要从用户那里获得一些东西才能知道何时重新缩放轴。因此，点击事件必须来自某种输入模式，如按钮，单选按钮，复选框等。
首先，您需要更新您用于y轴的比例的域。
使用.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>

d3更改并更新轴域散点图

1 个答案: