Question

以下是我的代码。我做了一个有5个圆弧的圆圈，现在我想为每个圆弧添加文字，以便：http://bl.ocks.org/nbremer/raw/b603c3e0f7a74794da87/

// declarations
const svgSize = {
  width: 1000,
  height: 800
};

// setup
let svg = d3
  .select('body')
  .append('svg')
  .attr('width', svgSize.width)
  .attr('height', svgSize.height)
  .append('g')
  .attr('transform', 'translate(' + svgSize.width / 2 + ',' + svgSize.height / 2 + ')');

// drawing
let arcGenerator = d3.arc()
  .innerRadius(296)
  .outerRadius(300);

let arcData = [
  { startAngle: 0, endAngle: 0.2 },
  { startAngle: 0.2, endAngle: 0.6 },
  { startAngle: 0.6, endAngle: 1.4 },
  { startAngle: 1.4, endAngle: 3 },
  { startAngle: 3, endAngle: 2 * Math.PI }
];

d3.select('g')
  .selectAll('path')
  .data(arcData)
  .enter()
  .append('path')
  .attr('d', arcGenerator);

Answer 1

d3.select('g')
  .selectAll('path')
  .data(arcData)
  .enter()
  .append('path')
  .attr("id", (d, i) => { return "uniqueId_" + i; })
  .attr('d', arcGenerator);

let monthData = [{ month: 'Jan' }, { month: 'Feb' }, { month: 'Mar' }, { month: 'Apr' }, { month: 'May' },]

// append the month names to each slice
svg.selectAll(".monthText")
  .data(monthData)
  .enter().append("text")
  .attr("class", "monthText")
  .attr("x", 10)   // move the text from the start angle of the arc
  .attr("dy", -10) // move the text down
  .append("textPath")
  .attr("xlink:href", function (d, i) { return "#uniqueId_" + i; })
  .text(function (d) { return d.month; });

如何在D3.js中的每个弧上包装文本？

1 个答案: