Поворот текста на точечной диаграмме - PullRequest
Новая
       30

Поворот текста на точечной диаграмме

2 голосов
/ 14 марта 2019

Используя этот пример , я смог создать график рассеяния D3 с текстовыми метками с точками рассеяния.

Я хотел бы повернуть каждую метку в определенной степени, однако, когда я пытаюсь это сделать, весь текст в целом поворачивается по одной оси, а не по отдельной оси`.

enter image description here

Вот мой код: 

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

Как преобразовать каждую метку на отдельной оси, а не все метки на одной оси?

1 Ответ

2 голосов
/ 14 марта 2019

Вместо использования единственного значения для rotate ... 

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

... который будет вращать текст вокруг начала координат (0,0), использовать позиции текста в функции rotate в качестве необязательных параметров x и y: 

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

В связанных с вами bl.ocks это будет (с помощью запятых): 

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

Вот обновленные bl.ocks: https://bl.ocks.org/GerardoFurtado/45fa2b852f8b0f229923c6dc1cdfa2b6/cf0917330d3d2775efd83a83c733c544d0338ea2

...