3

我正在尝试完成动态创建这些蓝色弧线的 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 语句，它会给我我想要出现在弧文本中的名称：

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，并将 text("JOBS") 替换为 text从 d 中提取。数据__key。鉴于上面动态创建弧的代码，并且鉴于我知道如何使用 d.__data .key 动态创建和检索要放置在弧中的文本，我应该能够完成这件事，但我可以不知道如何在 d3 中编写代码来获取数据并将其放置在弧中。有人可以帮忙吗？

4

2 回答 2

6

您应该阅读这篇关于嵌套选择的博文；我相信它会解释你想要做什么。

这是要点。当您将数据添加到您的选择时，将选择分配给一个变量：

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 })

用于在嵌套选择（即 s）中进行数据绑定的函数被传递给附加到asg.selectAll()的单个数据元素，并且是它的索引。gdi

于 2013-01-05T17:15:51.550 回答
1

想通了。稍微改变了事物的结构，使其更有意义，但基本上我所做的是：

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 仍然让我有些困惑，我确信这段代码可以得到很大改进，但它确实有效。

于 2013-01-05T17:16:18.590 回答