Запретить вращение текста в TextPath

Question

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

Моя скрипка - Скрипка

это экстракт для добавления текста

     node.append("text")
    .attr("x", 0)
    .attr("dy", 12)
    .attr("fill", "#ffffff")
    .style("font-size", "10px")
    .attr("text-anchor", "middle")
    .append("textPath")
    .attr("xlink:href", function(d, i) { return "#roulette_field_" + i })
    .text(function(d) { return d[0] })
    .attr("startOffset", 9);

Можно ли использовать элемент textPath только для привязки текста прямо к его ячейке, но не заставлять его следовать изогнутой линии поля?

Если нет, как добиться правильного размещения в соответствующей ячейке без поворота?

Также мне нужно поместить текст в середину (по горизонтали) ячейки, но середина привязки текста вообще не работает, в то время как startOffset = 9 работает неправильно в Internet Explorer;

Answer 1

Если вы хотите, чтобы текст располагался горизонтально, как обычный текст, просто отбросьте <textPath> и добавьте элементы обычного текста, расположив их методом centroid:

.attr("x", function(d, i) {
    return roulette.centroid(d, i)[0]
})
.attr("y", function(d, i) {
    return roulette.centroid(d, i)[1]
})

Вот ваш код с этим изменением:

var nums = [
  ["0", "#2e6632", "50%"],
  ["32", "maroon", "80%"],
  ["15", "#061882", "21%"],
  ["19", "maroon", "30%"],
  ["4", "#061882", "10%"],
  ["21", "maroon", "25%"],
  ["2", "#061882", "99%"],
  ["25", "maroon", "64%"],
  ["17", "#061882", "41%"],
  ["34", "maroon", "18%"],
  ["6", "#061882", "29%"],
  ["27", "maroon", "78%"],
  ["13", "#061882", "69%"],
  ["36", "maroon", "32%"],
  ["11", "#061882", "47%"],
  ["30", "maroon", "88%"],
  ["8", "#061882", "98%"],
  ["23", "maroon", "28%"],
  ["10", "#061882", "5%"],
  ["5", "maroon", "3%"],
  ["24", "#061882", "15%"],
  ["16", "maroon", "33%"],
  ["33", "#061882", "83%"],
  ["1", "maroon", "54%"],
  ["20", "#061882", "14%"],
  ["14", "maroon", "28%"],
  ["31", "#061882", "11%"],
  ["9", "maroon", "74%"],
  ["22", "#061882", "3%"],
  ["18", "maroon", "3%"],
  ["29", "#061882", "23%"],
  ["7", "maroon", "33%"],
  ["28", "#061882", "73%"],
  ["12", "maroon", "83%"],
  ["35", "#061882", "93%"],
  ["3", "maroon", "23%"],
  ["26", "#061882", "13%"]
];

var radius = 104;
var innerRadius = radius - 18;
var canvas = d3.select("#canvas")
  .append("svg")
  .attr("width", radius * 2)
  .attr("height", radius * 2);
var canvas2 = d3.select("#canvas2")
  .append("svg")
  .attr("width", radius * 2)
  .attr("height", radius * 2);

var increase = Math.PI * 2 / nums.length; //length in radians of each slice/field
var half = increase / 2; //half length for offset



var roulette = d3.svg.arc()
  .innerRadius(function(d, i) {
    return radius - 18;
  })
  .outerRadius(function(d, i) {
    return 104;
  })
  .startAngle(function(d, i) {
    return (i * increase) - half;
  })
  .endAngle(function(d, i) {
    return (increase * (i + 1)) - half;
  });


var node = canvas.selectAll(".roulette_group")
  .data(nums)
  .enter()
  .append("g")
  .attr("class", "roulette_group")
  .attr("id", function(d, i) {
    return "roulette_group_" + i
  })
  .attr("transform", "translate(" + radius + "," + radius + ")");


node.append("path")
  .attr("d", roulette)
  .style("fill", function(d) {
    return d[1];
  });

node.append("text")
  .attr("fill", "#ffffff")
  .style("font-size", "10px")
  .attr("text-anchor", "middle")
  .attr("dy", "2px")
  .attr("x", function(d, i) {
    return roulette.centroid(d, i)[0]
  })
  .attr("y", function(d, i) {
    return roulette.centroid(d, i)[1]
  })
  .text(function(d) {
    return d[0]
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="canvas"></div>