Question

我正在使用D3.js v4。

我有一个最小的例子，可以在一个轴上放大和缩小，使用以下代码：

// Create dummy data
var data = [];
  for (var i = 0; i < 100; i++) {
    data.push([Math.random(), Math.random()]);
  }
// Set window parameters
var width = 330
var height = 200

  // Append div, svg
  d3.select('body').append('div')
    .attr('id', 'div1')
  d3.select('#div1')
  .append("svg").attr("width", width).attr("height",height)
    .attr('id','chart')

// Create scaling factors
  var x = d3.scaleLinear()
            .domain([0,1])
            .range([0, (width - 30)])

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

  // Create group, then append circles
  d3.select('#chart').append('g')
    .attr('id','circlesplot')

  d3.select('#circlesplot')
    .selectAll('circles')
    .data(data)
    .enter().append('circle')
    .attr('cx', function(d,i){ return x(d[0]); })
    .attr('cy', function(d,i){ return y(d[1]); })
    .attr('r', 4)

// Create y axis, append to chart
  var yaxis = d3.axisRight(y)
                .ticks(10)

  var yaxis_g = d3.select('#chart').append('g')
                    .attr('id', 'yaxis_g')
                    .attr('transform','translate(' + (width - 30) +',0)')
                    .call(yaxis)

  // Create zoom svg to the right
  var svg = d3.select('#div1')
                .append('svg')
                .attr('width', 30)
                .attr('height', height)
                .attr('transform', 'translate('+ width + ',0)')
                .call(d3.zoom()
                        .on('zoom', zoom))

  function zoom() {
    // Rescale axis during zoom
    yaxis_g.transition()
            .duration(50)
            .call(yaxis.scale(d3.event.transform.rescaleY(y)))

    // re-draw circles using new y-axis scale
      var new_y = d3.event.transform.rescaleY(y);

      d3.selectAll('circle').attr('cy', function(d) { return new_y(d[1])})
  }

在这里摆弄：https://jsfiddle.net/v0aw9Ler/#&togetherjs=2wg7s8xfhC

将鼠标放在y轴的右侧并滚动会在y轴上显示缩放功能。

我想要发生的是y轴最大值（在这种情况下为1.0）保持固定，而仅在另一个方向上进行缩放。您可以通过将鼠标放在y轴的最底部和右侧来查看我的意思，并查看图表底部的点群集。

我认为它与使用zoom.extent（）有关，但我真的不确定从哪里开始;建议非常感谢。

这个最小工作示例的来源： http://bl.ocks.org/feyderm/03602b83146d69b1b6993e5f98123175

D3.js可缩放轴 - 如何只放大一个方向？

0 个答案: