Предотвращение наложения текста в круговой диаграмме D3

Я гуглил, но не могу понять это.

Моя ситуация такова, что страны, когда они представлены на круговой диаграмме, перекрываются:

Это пример того, что происходит:

jsfiddle

Я абсолютный новичок в D3 и пытаюсь предотвратить наложение текста. Есть ли атрибут текстового поля, который я могу добавить, чтобы мои метки не перекрывали друг друга?

Источник

2 ответа

Решение

Обновление: см. Ответ на вопрос D3 о размещении меток дуг в круговой диаграмме, если места достаточно для более комплексного решения.

Я не знаю какого-либо общего метода размещения текстовых элементов, чтобы они не перекрывались.

Тем не менее, существует решение для вашей проблемы, вращая метки и масштабируя график так, чтобы они не перекрывались: http://jsfiddle.net/2uT7F/

// Get the angle on the arc and then rotate by -90 degrees
var getAngle = function (d) {
    return (180 / Math.PI * (d.startAngle + d.endAngle) / 2 - 90);
};

g.append("text")
    .attr("transform", function(d) { 
            return "translate(" + pos.centroid(d) + ") " +
                    "rotate(" + getAngle(d) + ")"; }) 
    .attr("dy", 5) 
    .style("text-anchor", "start")
    .text(function(d) { return d.data.label; });
Источник

Еще одним решением было бы изменить порядок данных, в первую очередь США. Возможно, вы найдете угол наклона круговой разметки более читабельным.

var data_values = [48, 1, 1, 1, 1, 1, 1, 4];
var titles = ["USA","Pakistan", "Israel", "Netherlands", "Italy", "Uruguay",       "United Kingdom", "Austria", "China"]

http://jsfiddle.net/rocky1616/oLzsrd4o/

Решение Musical_ut здесь также подойдет. Вы даже можете немного уменьшить угол, если это сработало в вашем дизайне.

  var getAngle = function (d) {
      return (180 / Math.PI * (d.startAngle + d.endAngle) / 2 + 45);
  };

http://jsfiddle.net/2uT7F/26/

Вам нужно создать блок if else, чтобы позаботиться об элементе USA, но это начало, если это поможет.

Источник
Другие вопросы по тегам