在散点图上旋转文本

Question

使用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)');

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

Answer 1

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

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

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

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

在您链接的bl.ock中，将是（使用逗号）：

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

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