Question

我正在用d3.js绘制轮盘赌，我需要防止字段中倒置数字的旋转-因此文本标签应像摩天轮上的小木屋一样-example

我的小提琴- fiddle

这是添加文字的摘录

     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

如果要水平放置文本（作为常规文本），只需放下PATH=/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/mysql/bin/ export PATH并附加普通文本元素，然后使用<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]
  });

防止文本在TextPath上旋转

1 个答案: