d3.js/svg - 如何动态地将文本附加到我的弧上

Question

我正在尝试完成动态创建这些蓝色弧的d3项目的最后一点,我需要在其上放置弧形文本,如下图所示:

上面的图片是我通过试验和错误静态放置弧形文本所做的事情,但我想根据文本下面的蓝色弧线动态放置它.这是动态创建弧的代码:

var groupData = data_group.selectAll("g.group")
    .data(nodes.filter(function(d) { console.log(d.__data__.key); return (d.key=='Employers' ||{exp:channel:entries category="13" backspace="2"} d.key == '{url_title}' ||{/exp:channel:entries}) && d.children; }))
    .enter().append("group")
    .attr("class", "group");

arc_group.selectAll("g.arc")
    .data(groupData[0])
    .enter().append("svg:path")
    .attr("d", groupArc)
    .attr("class", "groupArc")
    .style("fill", "#1f77b4")
    .style("fill-opacity", 0.5);

{exp:}内容是我从表达式引擎中的内容管理系统中提取的预先准备的数据,如果它看起来令人困惑的话.

所以,我有我的弧线.现在你会注意到groupData代码块中有一个console.log语句,它会给我想要在arc文本中出现的名字:

console.log(d.__data__.key);

现在,我用来静态放置弧文本的代码是这样的:

var arcData = [
  {aS: 0, aE: 45,rI:radius - chartConfig.linePadding + chartConfig.arcPadding,rO:radius - chartConfig.linePadding + chartConfig.textPadding-chartConfig.arcPadding}
];

var arcJobsData = d3.svg.arc().innerRadius(arcData[0].rI).outerRadius(arcData[0].rO).startAngle(degToRad(1)).endAngle(degToRad(15));
var g = d3.select(".chart").append("svg:g").attr("class","arcs");
var arcJobs = d3.select(".arcs").append("svg:path").attr("d",arcJobsData).attr("id","arcJobs").attr("class","arc");
g.append("svg:text").attr("x",3).attr("dy",15).append("svg:textPath").attr("xlink:href","#arcJobs").text("JOBS").attr("class","arcText"); //x shifts x pixels from the starting point of the arc. dy shifts the text y units from the top of the arc

在上面的代码中,我唯一需要做的就是动态地为弧分配一个ID,然后在xlink:href属性中引用该ID,以及用文本替换文本("JOBS")从d开始.data__key.鉴于以上这些动态创建的弧的代码,因为我知道如何动态地创建和检索我想用d .__数据的弧线放置文本.关键,我应该能够完成这件事情了,但我可以弄清楚如何在d3中编写代码来获取数据并将其放在弧中.任何人都可以帮忙吗？

Answer 1

你应该把关于嵌套选择的博客文章读一读; 我相信它会解释你想要做什么.

这是要点.向选择中添加数据时,将选择分配给变量:

var g = data_group.selectAll("g.group")
    .data(nodes.filter(function(d) { /* stuff */ }));

这样,您可以对其执行子选择,这将接收绑定到您的g选择的数据的单个元素.您可以使用它来添加弧和文本:

g.enter().append('group') // Question: Are you sure you mean 'group' here?
    .attr('class', 'group')

g.selectAll('g.arc')
    .data(function(d, i) { return d; })
  enter().append('path')
     // Setup the path here

g.selectAll('text')
    .data(function(d, i) { return d; })
  .enter().append('text')
    .attr('text', function(d) { return d.__data__.key })

用于在嵌套选择(即g.selectAll()s)中进行数据绑定的函数正在传递附加到as 的数据的单个元素,并且是其索引.gdi