Javascript 如何使用nvd3在柱状图上定位旋转的x轴标签？

我正在使用nvd3的多重条形图构建条形图，需要调整旋转x轴标签的位置：

var chart = nv.models.multiBarChart();
...
chart.rotateLabels(-90);

---

我想列标签不重叠的图表，并在每个酒吧居中。我可以在绘制图表后选择标签并进行调整，但有没有更简单的方法？

我发现处理这一问题的最佳方法是自己旋转x轴刻度标签。为什么？因为NVD3没有正确处理旋转和相关的平移。查看您的图像，您将看到库允许旋转将标签从它们所表示的列的正下方平移出来。它还开始错误处理axis.tickPadding值，等等

您需要做的第一件事是确保图表有足够的空间放置已翻译的标签，如下所示：

chart.margin({bottom: 60});

然后，我们可以平移和旋转标签：

var xTicks = d3.select('.nv-x.nv-axis > g').selectAll('g');
xTicks
  .selectAll('text')
  .attr('transform', function(d,i,j) { return 'translate (-10, 25) rotate(-90 0,0)' }) ;

标签现在如下所示：

---

对于多个图形，您可以在d3中添加+containerId+'svg。选择如下所示：

//Rotate x-axis label
var xTicks = d3.select('#' + containerId + ' svg .nv-x.nv-axis > g').selectAll('g');
xTicks
    .selectAll('text')
    .attr('transform', function(d,i,j) { return 'translate (-15, 60) rotate(-90 0,0)' });

---

无论如何，谢谢@River answer。

这对我来说很有效。我提交这篇文章的主要原因是，更改锚点比手动转换位置更好

var xTicks = d3.select('.nv-x.nv-axis > g > g',_this.context.element).selectAll('g').selectAll('text');
xTicks.attr('transform', function() { return 'rotate(' + angle + ' 0,0)' }) ;
xTicks.attr('text-anchor',function() {
    var anchor;
    if(angle > 0){ anchor = 'start'; }
    else if(angle < 0){ anchor = 'end'; }
    else { anchor = 'middle'; }
    return anchor;
});

---

无论文本旋转是什么，都要给出开始/中间/结束

d3.select('.nv-x.nv-axis > g > g').selectAll('g.tick text').style('text-anchor', 'start');  //start/middle/end

---

以下几点对我很有用：

chart.axislist["xAxis"]["rotateLabels"]= -45

---

有一种css替代方案

.nv-x .tick text {
    transform: rotate(-90deg) translateX(-15px) translateY(-7px);
}

---

谢谢你。你应该在哪里做？我有几个图表，如果我按照你说的做，它只适用于第一个图表。也许有一些比赛条件，我只需要旋转标签，当我确定图表绘制完成。知道如何知道吗？您需要找到一种方法，通过将“.nv-x.nv-axis>g”选择器更改为合理的值来同时选择所有XTICK，但这可能很困难。您可能必须为每个人都这样做，依次选择他们的XTick。确保每个图表都有自己的类/id，以便您可以轻松地选择它们。我为一个类似的问题绞尽脑汁了好几个小时。。。这真的成功了。。。谢谢请注意，您可以并且应该对任何其他图表类型执行此操作。最好指定您正在操作的特定D3容器，尤其是当涉及多个图表时；必须说问得很好。。。确实帮我解决了一个类似的问题。谢谢