d3 - Повернуть метки по оси X

Я пробую этот график:

введите здесь описание изображения

с моими данными.

Я хотел повернуть метки x-axis.

Вот код:

var timeLabels = svg.selectAll(".timeLabel")
          .data(times)
          .enter().append("text")
            .text(function(d) { return d; })
            .attr("x", function(d, i) { return i * gridSize; })
            .attr("y", 0)
            .style("text-anchor", "end")
            .attr("transform", "translate(" + gridSize / 2 + ", -6)rotate(-90)")
            .attr("class", function(d, i) { return ((i >= 8 && i <= 16) ? "timeLabel mono axis axis-worktime" : "timeLabel mono axis"); });

Но результат я получаю. Целые метки поворачиваются на -90 градусов по одной прямой. Вместо этого я хотел, чтобы каждая метка была повернута на -90 градусов. Нравится это:

введите здесь описание изображения

Я даже пытался использовать .attr("transform", function(d) {return "translate(" + gridSize / 2 + ", -6)rotate(-90)"}), но это не помогло.

Результат :

введите здесь описание изображения

Помощь будет очень рада.


javascript d3.js timeline heatmap
person user3206082    schedule 17.01.2014    source источник
comment
Вы видели это учебник?   -  person Lars Kotthoff    schedule 17.01.2014
comment
Да, я пытался, но результат не тот, что я ожидал. Выложу изображение.   -  person user3206082    schedule 18.01.2014

Ответы (2)


arrow_upward
9
arrow_downward

Проблема в том, что когда вы вращаете элемент, он вращается вокруг исходной точки (0,0) локальной системы координат. Если элемент, который вы вращаете, не находится рядом с исходной точкой, он может в конечном итоге сместиться на довольно большое расстояние и, возможно, вообще выйти за пределы диаграммы.

Есть два способа исправить это:

  1. Поместите метку с атрибутом «преобразование» вместо атрибутов x и y. Таким образом, система координат метки, включая точку вращения (0,0), будет располагаться вместе с ней, и вращение произойдет там, где вы ожидаете. Код @Manoj следует этой системе, но предполагает, что вы используете функцию xAxis по умолчанию. Для кода пользовательской метки оси вашим меткам присваивается значение y, равное 0, и значение x, определяемое функцией. Вам просто нужно переместить эти значения в атрибут transform, обращая особое внимание на то, чтобы преобразование общей позиции происходило перед вращением и корректировкой:

    var timeLabels = svg.selectAll(".timeLabel")
  .data(times)
  .enter().append("text")
    .text(function(d) { return d; })
    .attr("transform", function(d, i) { 
          return "translate(" + ( i * gridSize) + ",0)"
                  + "translate(" + gridSize / 2 + ", -6)rotate(-90)";
     } )
    .style("text-anchor", "end")
    .attr("class", function(d, i) { return ((i >= 8 && i <= 16) ? 
                               "timeLabel mono axis axis-worktime" : 
                               "timeLabel mono axis"); 
     });

    Конечно, вы можете объединить эти два оператора перевода, например:

        .attr("transform", function(d, i) { 
          return "translate(" + ( (i + 0.5) * gridSize) + ",-6)"
                  + "rotate(-90)")

  2. В качестве альтернативы вы можете указать центр вращения в операторе rotate, включив значения x и y точки, вокруг которой вы хотите, чтобы он вращался:

    var timeLabels = svg.selectAll(".timeLabel")
  .data(times)
  .enter().append("text")
    .text(function(d) { return d; })
    .attr("x", function(d, i) { return i * gridSize; })
    .attr("y", 0)
    .attr("transform", function(d, i) { 
          return "translate(" + gridSize / 2 + ", -6)" +
                 "rotate(-90 "+ ((i + 0.5) * gridSize) + " " + (-6) +")";
     } )
    .style("text-anchor", "end")
    .attr("class", function(d, i) { return ((i >= 8 && i <= 16) ? 
                               "timeLabel mono axis axis-worktime" : 
                               "timeLabel mono axis"); 
     });

    Как видите, эта версия довольно повторяющаяся, так как мы должны дважды вычислить положение метки — один раз для ее позиционирования и один раз для установки центра вращения. Вы можете понять, почему большинство примеров (и функции оси d3) размещают метки с переводами, чтобы их можно было просто повернуть на месте.

person AmeliaBR    schedule 18.01.2014
comment
Большое спасибо за краткое объяснение. Большое спасибо :). - person user3206082; 20.01.2014
comment
Мне нужна еще одна помощь. Вы могли видеть, что первое поле во втором ряду отсутствует. На самом деле он перекрывается с первым полем первой строки. Значение y первого поля второй строки совпадает со значением первого поля первой строки. Можете ли вы помочь мне исправить это? - person user3206082; 20.01.2014
comment
Боюсь, я ничего не понимаю, просто глядя на картинку. Если вы не можете понять это после тщательного изучения вашего кода на наличие опечаток, задайте еще один вопрос с вашим кодом для позиционирования квадратов. Рабочий пример был бы еще лучше. - person AmeliaBR; 20.01.2014

arrow_upward
-3
arrow_downward

Попробуйте этот код:

Скрипка:

 svg.append("g") // Add the X Axis
.attr("class", "x axis")
.attr("id", "x")
    .attr("transform", "translate(0," + (h) + ")")
    .call(xAxis)
    .selectAll("text")
    .style("text-anchor", "end")
    .attr("dx", "-.8em")
    .attr("dy", ".15em")
    .attr("transform", function (d) {
    return "rotate(-90)";
});
person Manoj    schedule 17.01.2014
comment
Функция, которую вы написали, мне не помогает в моем случае. - person user3206082; 18.01.2014
comment
Скрипка даже не работает. Текст не поворачивается. - person SmashCode; 24.06.2016