Question

我用线性刻度x轴创建了一个d3图。我使用tickFormat（）将文本标签放在xaxis上。

当我缩放绘图时，刻度值超出x轴。如何使超出x轴（svg rect）的刻度线（带有文本标签）消失？

var xAxis = d3.svg.axis().scale(x)
  .orient("bottom")
  .tickValues(idForXAxis)
  .tickFormat(function(d,i){ return valuesForXAxis[i] })

小提琴：https://jsfiddle.net/wicedp/q1b2dsdt/4/

Answer 1

此处的问题不是tickFormat。您可以轻松找到罪魁祸首：删除tickValues并且刻度将保持在范围内。

最好的想法就是让D3生成滴答声。但是，如果要在原始视图中显示valuesForXAxis数组中的所有值，并且仍然具有格式化标记的缩放行为，则有一种解决方法。将刻度数设置为valuesForXAxis数组中的值数：

xAxis.ticks(idForXAxis.length)

然后，在zoomed函数内：

xAxis.ticks(idForXAxis.length/d3.event.scale);

这是更新的小提琴：https://jsfiddle.net/pfrdvLtx/

Answer 2

我能够通过添加这段代码来解决问题 -

var clipX = svg.append("clipPath")
  .attr('id', 'clip-x-axis')
  .append('rect')
  .attr('x', -10)
  .attr('y', 0)
  .attr('width', width)
  .attr('height', margin.bottom);

svg.append("g")
.attr("class", "x axis")
.attr('clip-path', 'url(#clip-x-axis)')
.attr("transform", "translate(0, " + height + ")")
.call(xAxis)
.selectAll(".tick text")
  .call(wrap, 0);

这样我认为xaxis正在被正确翻译和剪辑。这是小提琴 - https://jsfiddle.net/wicedp/q1b2dsdt/12/

对于线性刻度中刻度线的文本标签，缩放会使标签延伸到轴之外

2 个答案: