D3.js 将数据点和文本添加到具有线条的多条形图上的线条

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

它工作得很好，一切都按预期的方式进行。但是，有人要求这些行添加数据点，并为其上方的每个点添加值文本

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

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

                })

然而，这使得一条线消失了。我是否将其放置在错误的位置，或者我是否遗漏了一些内容来告诉代码以行结束并继续

首先，行着色中的一个小而快速的故障是由于

Name=d[0]。Name

其中

d

没有属性作为Name，但有一个属性作为Name（大写N）

现在，代码的主要问题是，您试图将

文本

附加到

路径

中，这是行不通的。你应该做的是：

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')
   .....

使用#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);
                    }
                });

如果您注意到上面的代码，我将首先指定

文本

，然后根据文本的宽度应用

x

，以将文本居中于该点。请根据您的要求自由调整

dy

，

dx

综合以上所有内容，下面是该代码的一个分支：

希望这有帮助。如果您想寻求建议，请参阅向折线图添加数据点

---

杰出的我第一次尝试了类似的方法，但它没有改变图表上的任何内容，所以我认为我走错了方向。谢谢Shashank！当然很高兴我能帮忙：）

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