Javascript 将标签正确放置在D3.js中的轴上

我有一张显示一些数据的热图。如果用户单击标签（

x

或

y

轴），数据将正确排序。 我的问题是在数据排序前后标签的正确定位

这是

如您所见，最初的图表如下：

y

轴上的标签正确，而

x

轴上的标签不正确，因为它们应该处于相同的高度。相反，他们下来了

当我点击

ddd

时，它变成：

同样的问题

当我点击

2001

时，它变成：

现在一切都一团糟

控制标签定位的代码如下所示：

var rowLabels = svg.append('g')
    .attr('class', 'rowLabels')
    .selectAll('.rowLabels')
    .data(regionsName)
    .enter().append('text')
    .text(function(d) {
        return d;
    })
    .attr('x', 0)
    .attr('y', function(d, i) {
        return i * cellSize;
    })
    .attr('transform', function(d, i) {
        return 'translate(-25, 11)';
    })
    .attr('class', 'rowLabel mono')
    .attr('id', function(d) {
        return 'rowLabel_' + regionsName.indexOf(d);            
    })
    .attr('font-weight', 'normal')
    .on('mouseover', function(d) {
        d3.select(this).attr('font-weight', 'bold').style('fill', 'red');
    })
    .on('mouseout', function(d) {
        d3.select(this).attr('font-weight', 'normal').style('fill', 'black');
    })
    .on('click', function(d, i) {
        rowSortOrder = !rowSortOrder;
        sortByValues('r', i, rowSortOrder);
    });

var colLabels = svg.append('g')
    .attr('class', 'colLabels')
    .selectAll('.colLabels')
    .data(yearsName)
    .enter().append('text')
    .text(function(d) {
        return d;
    })
    .attr('x', 0)
    .attr('y', function(d, i) {
        return i * cellSize;
    })
    .attr('transform', function(d, i) {
        return 'translate(0, -3) rotate(-65)';
    })
    .attr('class', 'colLabel mono')
    .attr('id', function(d) {
        return 'colLabel_' + yearsName.indexOf(d);          
    })
    .attr('font-weight', 'normal')
    .style('text-anchor', 'left')
    .attr('dx', '.8em')
    .attr('dy', '.5em')
    .on('mouseover', function(d) {
        d3.select(this).attr('font-weight', 'bold').style('fill', 'red');
    })
    .on('mouseout', function(d) {
        d3.select(this).attr('font-weight', 'normal').style('fill', 'black');
    })
    .on('click', function(d, i) {
        colSortOrder = !colSortOrder;
        sortByValues('c', i, colSortOrder);
    });

以及：

以及：

我想了想，把它改了一千遍，但什么也没变。

---

有人知道如何帮助我吗？

您设置轴标签的方式太复杂了。旋转标签时，标签从坐标系原点旋转，而不是从文本定位旋转。如果我们按原样比较标签，并且移除变换并仅使用指定的x、y属性，我们可以更好地看到这一点：

.attr('x', 0)
.attr('y', function(d, i) {
    return i * cellSize;
})
//.attr('transform', function(d, i) {
//    return 'translate(-25, 11)';
//})

我们可以看到所有标签围绕一个公共点一起旋转。标签放置可能有错误的提示也来自代码，该代码动态设置了

y

值和固定的

x

值，以放置仅在

x

值中不同的值

我们可以简化它，而不是设置x、y和变换，让我们只设置变换。首先，我们将修改坐标系，使每个标签坐标系的原点位于其定位的位置。然后我们将旋转：

.attr('transform', function(d, i) {
    return 'translate('+(i*cellSize)+',2) rotate(-65)';
})

我们还需要更新更新函数：

t.selectAll('.colLabel')
  .attr('transform', function(d, i) {
    return 'translate('+(sorted.indexOf(i)*cellSize)+',2) rotate(-65)';
  })

给我们：

另一个问题是y轴标签的间距，排序时将更新标签的x位置。这是不必要的，标签只需垂直移动，我们可以删除变换更改，只需使用：

t.selectAll('.rowLabel')
  .attr('y', function(d, i) {
     return sorted.indexOf(i) * cellSize;
   })

这是一个例子

t.selectAll('.colLabel')
  .attr('transform', function(d, i) {
    return 'translate('+(sorted.indexOf(i)*cellSize)+',2) rotate(-65)';
  })

t.selectAll('.rowLabel')
  .attr('y', function(d, i) {
     return sorted.indexOf(i) * cellSize;
   })