隐藏系列后轴标签恢复到原始位置答案

【问题标题】：axis label restoring to original position after hiding series隐藏系列后轴标签恢复到原始位置
【发布时间】：2014-07-07 07:42:03
【问题描述】：

在my NVD3 chart here 中，我已将 X 轴标签向下移动，以便与垂直对齐的日期一致。为此我做到了：

xTicks.select('.nv-axislabel').attr("y", 90);  // line # 81 in JS

现在的问题是，如果我使用右上角的控件隐藏任何系列，此 X 轴标签将恢复到其原始位置，即日期。

我如何让它保持在新的位置不变？

jsFiddle

【问题讨论】：

标签： javascript d3.js nvd3.js

【解决方案1】：

有点肮脏的解决方案，但可能已经足够了：

更改标签的y属性后，删除d3内部使用的类来选择标签并重置其属性：

xTicks.select('.nv-axislabel')
    .attr("y", 90)
    .classed({'nv-axislabel':false});

然后，看起来 d3 只是在不需要的位置创建了一个新标签，您可以将其添加到 CSS 文件中：

.nv-x .nv-axislabel {
    display:none;
}

我将其添加为一项规则，因为以编程方式执行此操作（使用 .style()）需要很长时间，并且您会看到它闪烁。

FIDDLE

【讨论】：

【解决方案2】：

如果您将 NVD3 库更新到版本 1.1.11b

您可以使用旋转标签的内置功能。试试这个：

chart.xAxis
 .tickPadding(-5).rotateLabels(-90);

将.tick major > text 的x 属性更改为10 以将位置移动一点。

那么您将不需要以下代码：

// translate and rotate x-axis ticks
var xTicks = d3.select('.nv-x.nv-axis > g').selectAll('g');

xTicks.selectAll('g > .tick > text')
.attr('transform', function(d, i, j) {
    return 'translate (-10, 40) rotate(-90 0,0)'
});

// move x-axis label down
xTicks.select('.nv-axislabel').attr("y", 90)

希望对你有帮助

【讨论】：