将数据点和文本添加到带有线条的多条形图上的线条中

Question

我使用了在这里找到的 d3 预构建图表：

https://bl.ocks.org/nanu146/f48ffc5ec10270f55c9e1fb3da8b38f0

它工作得很好，一切都在按照它应该的方式发展。但是，已要求这些行添加数据点，并为其上方的每个点添加值的文本。

我在这里放置了一些文本代码：

svg.selectAll(".lines")
.classed('labels-group', true)
.data(lineData)
.enter()
.append("g")
.attr("class", "line")
.each(function (d) {
Name = d[0].name
d3.select(this)
.append("path")
.attr("d", function (b) { return line(b) })
.style({ "stroke-width": "3px", "fill": "none" })
.style("stroke", LineColor(Name))
.transition()
.duration(1500)
.append('text')
.classed('label', true)
.attr({
'x': function(d, i) {
return x(d.name);
},
'y': function(d, i) {
return y(d.value);
}
})
.text(function(d, i) {
return d.value;
});
})

然而，这使得一条线消失了。我是否将其放在错误的位置，或者我是否缺少一些内容来告诉代码完成该行并继续？

Answer 1

1. 首先，线条着色中的一个小而快速的故障是由于这个Name = d[0].name，其中d没有属性作为名称，但有一个作为名称(大写 N(

   Name = d[0].Name;
   

2. 现在，代码的主要问题是您试图将text附加到永远不起作用的path。你应该做的方法是：

   var lines = d3.select(this)
   .append("path")
   .attr("d", function (b) { return line(b) })
   .style({ "stroke-width": "3px", "fill": "none" })
   .style("stroke", LineColor(Name))
   .transition().duration(1500);
   var texts = d3.select(this).selectAll('text.value')
   .....
   

3. 使用 #2 中的逻辑，在d中附加每个元素的文本，并相应地分配x、y和text。方法如下：

   var texts = d3.select(this).selectAll('text.value')
   .data(d)
   .enter().append('text')
   .classed('label', true)
   .attr('dy', '-1em')
   .text(function (d) {
   return d.Value;
   })                    
   .attr({
   'x': function(d, i) {
   var width = d3.select(this).node().getBBox().width;
   return x0(d.Date) + x0.rangeBand() / 2 - width/2;
   },
   'y': function(d, i) {
   return YLine(d.Value);
   }
   });
   

   如果您注意到上面的代码，我将首先分配text，然后使用 getBBox 根据文本的宽度应用x，使文本在该点居中。请根据您的要求随意调整dydx。

   将以上所有内容放在一起，这是该代码的一个分支：

   https://bl.ocks.org/shashank2104/2acfdd38dc262285d2c736ba86dbc1ad/11380be2e4c095808231056930d6860f97722254

   希望这有帮助。如果您愿意提出建议，请参阅此处以将数据点添加到折线图。