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:}内容是我从Expression Engine内容管理系统中提取的预处理数据，如果看起来很困惑，请不要解释它。

现在，我有我的弧形。现在你会注意到在groupData代码块中我有一个console.log语句，那将给我想出现在弧形文本中的名称:

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.__data.key，我应该能够完成这个任务，但我无法想出如何编写d3代码来将数据放置在弧线中。有人可以帮忙吗？

- mheavers

Answer 1

你应该阅读一下这篇关于嵌套选择的博客文章，链接在这里：http://bost.ocks.org/mike/nest/。我相信它会解释你试图做什么。

简而言之，当你向选择集中添加数据时，请将选择集分配给一个变量：

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

这样，您可以对其执行子选择操作，这将接收绑定到您的

- seliopou

---

这个解决方案对我不起作用。但是，当我将数据的单个元素包装在数组中时，它可以工作。 - Denzo

Answer 2

我想通了。稍微改变了一些事情的结构，使它更有意义，但本质上我所做的是这样的：

var groupData = data_group.selectAll("g.group")
    .data(nodes.filter(function(d) { 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"); //MH - why do we need this group - these elements are empty. Shouldn't this just be an array? Find out how to delete the svg elements without getting rid of the data, which is needed below.


  var groupArc = d3.svg.arc()
    .innerRadius(ry - 177)
    .outerRadius(ry - 157)
    .startAngle(function(d) { return (findStartAngle(d.__data__.children)-2) * pi / 180;})
    .endAngle(function(d) { console.log(d.__data__.key); return (findEndAngle(d.__data__.children)+2) * pi / 180});

  var arc_and_text = arc_group.selectAll("g.arc")
    .data(groupData[0])
    .enter().append("svg:g")
    .attr("class","arc_and_text");

  var arc_path = arc_and_text.append("svg:path")
    .attr("d", groupArc)
    .attr("class", "groupArc")
    .attr("id", function(d, i) { return "arc" + i; })
    .style("fill", "#1f77b4")
    .style("fill-opacity", 0.5); //MH: (d.__data__.key) gives names of groupings

  var arc_text = arc_and_text.append("text")
    .attr("class","arc_text")
    .attr("x", 3)
    .attr("dy", 15);

  arc_text.append("textPath")
    .attr("xlink:href", function(d, i) { return "#arc" + i; })
    .attr("class","arc_text_path")
    .style("fill","#ffffff")
    .text(function(d, i) { return d.__data__.key; });

D3 仍然让我感到有些神秘，我相信这段代码可以得到很大的改进，但它能够正常工作。

- mheavers