logo标签列表

限制d3中的缩放和平移

javascriptd3.js
4
我正在尝试使用D3的缩放行为正确地限制我的D3图表的缩放和比例。我已将问题简化为以下最小可运行示例。我希望用户不能以一种使其能够看到y轴下方的0线的方式进行缩放。
在非缩放状态下，通过将“translateExtent”设置为svg的完整高度，该示例可以工作，但是当用户稍微缩放时，它当然会出现问题。实际上，您缩放得越多，您就能够看到负区域的范围越远。
我需要将“translateExtent”设置为什么？
我在每次缩放事件上重新绘制线条和轴的原因是通常我使用react来呈现我的svg并只使用d3进行计算 - 但我已经删除了对react的依赖，以提供更简洁的示例。 

const data = [ 0, 15, 30, 32, 44, 57, 60, 60, 85];

// set up dimensions and margins
const full = { w: 200, h: 200 };
const pct = { w: 0.7, h: 0.7 };
const dims = { w: pct.w * full.w, h: pct.h * full.h };
const margin = { w: (full.w - dims.w)/2, h: (full.h - dims.h)/2 };

// scales
const x = d3.scaleLinear()
  .rangeRound([0, dims.w])
  .domain([0, data.length]);
  
const y = d3.scaleLinear()
  .rangeRound([dims.h, 0])
  .domain(d3.extent(data));

// axes
const axes = {
  x: d3.axisBottom().scale(x).tickSize(-dims.w),
  y: d3.axisLeft().scale(y).tickSize(-dims.h)
}


const g = d3.select('.center');

// actual "charting area"
g
  .attr('transform', `translate(${margin.w}, ${margin.h})`)
  .attr('width', dims.w)
  .attr('height', dims.h)
  
// x-axis
g.append('g')
.attr('transform', `translate(0, ${dims.h})`)
.attr('class', 'axis x')
.call(axes.x)

// y-axis
g.append('g')
.attr('class', 'axis y')
.call(axes.y)


// generator for the line
const line = d3.line()
  .x( (_, i) => x(i) )
  .y( d => y(d) );

// the actual data path
const path = g
  .append('path')
  .attr('class', 'path')
  .attr('d', line(data))
  .attr('stroke', 'black')
  .attr('fill', 'none')

const zoomBehaviour = d3.zoom()
  .scaleExtent([1, 10])
  .translateExtent([[0,0], [Infinity, full.h]])
  .on('zoom', zoom);
  
d3.select('svg.chart').call(zoomBehaviour);
  
function zoom() {
  const t = d3.event.transform;
  
  const scaledX = t.rescaleX(x);
  const scaledY = t.rescaleY(y);
  axes.x.scale(scaledX);
  axes.y.scale(scaledY);
  d3.select('.axis.x').call(axes.x);
  d3.select('.axis.y').call(axes.y);
  
  line
    .x( (_, i) => scaledX(i) )
    .y( d => scaledY(d) );
  
  const scaledPath = path.attr('d', line(data));
}
body {
  width: 200px;
  height: 200px;
}

svg.chart {
  width: 200px;
  height: 200px;
  border: 1px solid black;
}

.axis line, .axis path {
  stroke: grey;
}
<script src="https://d3js.org/d3.v4.js"></script>
<body>
<svg class="chart">
  <g class="center"></g>
</svg>
</body>

2个回答
5

根据Robert的建议，我成功地使其工作了。我不得不稍微调整一下条件以适应我的使用情况：

const dims = /* object holding svg width and height */;
const [xMin, xMax] = this.scales.x.domain().map(d => this.scales.x(d));
const [yMin, yMax] = this.scales.y.domain().map(d => this.scales.y(d));

if (t.invertX(xMin) < 0) {
  t.x = -xMin * t.k;
}
if (t.invertX(xMax) > dims.width) {
  t.x = xMax - dims.width * t.k;
}
if (t.invertY(yMax) < 0) {
  t.y = -yMax * t.k;
}
if (t.invertY(yMin) > dims.height) {
  t.y = yMin - dims.height * t.k;
}
1

在 Mike Bostock的这个示例中，可以查看zoomed函数，它可以实现你想要的功能。关键部分是当约束条件被触发时，t.x和/或t.y的改变：

function zoomed() {
    var t = d3.event.transform;
    if (t.invertX(0) > x0) t.x = -x0 * t.k;
    else if (t.invertX(width) < x1) t.x = width - x1 * t.k;
    if (t.invertY(0) > y0) t.y = -y0 * t.k;
    else if (t.invertY(height) < y1) t.y = height - y1 * t.k;
    g.attr("transform", t);
}
1
遗憾的是，这种行为与我所需的不同。在这个例子中，图像的任何部分都不能消失，因此放大实际上是不可能的。如果您在提供的链接中尝试它，您会注意到您永远无法“缩放”示例图像。我希望我的用户能够做到这一点，但当放大时他们不应该能够“超过”图像，即图像的一部分必须始终可见。 - DeX3
我并不是想提供一个完全解决你使用情况的方案，更像是展示了一种额外的步骤，这个步骤在你的方法中并不存在，即t.x和t.y的条件变异。也许你可以调整条件，因为Mike的例子限制了整个内容始终可见，而你想将内容（我猜是线条内容的边界框）限制为“包围”你的视口。只是一个不同的条件（如果我理解你的需求，内容边界框和视口框相对于Mike的例子是反向关系）。 - Robert Monfera
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接