javascript - 在 D3.js 中将标签正确放置在轴上

Question

我有一个显示一些数据的热图。如果用户点击标签(x 或 y 轴)，数据会正确排序。 我的问题是数据排序前后标签的正确定位。

这是 PLUNKER .

如你所见，最初的图表是这样的:

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);
    });

和:

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

和:

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

改了一千遍，想了想，还是不行。 有人知道如何帮助我吗？

Answer 1

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

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

我们可以看到所有标签都围绕一个公共(public)点一起旋转。标签放置中可能出现问题的提示也来自动态设置 y 值和固定 x 值的代码，用于放置仅在 x 值。

我们可以简化这个，不用设置x、y和transform，我们只设置transform。首先，我们将修改坐标系，使每个标签坐标系的原点都在其锚定的位置。然后我们将旋转:

.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;
   })

这是一个 updated plunkr .