在散点图上旋转文本

【问题标题】：Rotating Text on a scatter plot在散点图上旋转文本
【发布时间】：2019-08-04 19:34:38
【问题描述】：

使用this example，我已经能够使用带有散点的文本标签创建 D3 的散点图。

我想将每个标签旋转到一定程度，但是，当我尝试这样做时，所有文本作为一个整体都在一个轴上旋转，而不是单个轴。

这是我的代码：

svg.selectAll("circle")
    .data(data)
    .enter()
    .append('circle')
        .attr('fill', '#4E5FF3')
        .attr('stroke', 'none')
        .attr('cx', d => { return x(Date.parse(d.date)) })
        .attr('cy', d => { return y(d.totalValue) })
        .attr('r', 3);
svg.selectAll("text")
    .data(data)
    .enter()
    .append('text')
        .attr('x', d => { return x(Date.parse(d.date)) })
        .attr('y', d => { return y(d.totalValue) })
        .text(d => {
            return 'Total: ' + d.totalValue + ' - Month: ' + d.monthValue;
        })
        .attr('transform','rotate(5)translate(0, 0)');

如何转换单个轴上的每个标签，而不是一个轴上的所有标签？

【问题讨论】：

标签： javascript d3.js svg charts

【解决方案1】：

而不是为rotate 使用单个值...

.attr('transform','rotate(5)translate(0, 0)');

...它将围绕原点（0,0）旋转文本，使用rotate函数中的文本位置，作为可选的x和y参数：

rotate(<a> [<x> <y>])

在您链接的块中，这将是（使用逗号）：

.attr('transform',function(d){
    return "rotate(5," + xScale(d[0]) + "," + yScale(d[1]) + ")"
});

这里是更新的 bl.ocks：https://bl.ocks.org/GerardoFurtado/45fa2b852f8b0f229923c6dc1cdfa2b6/cf0917330d3d2775efd83a83c733c544d0338ea2

【讨论】：