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

首先，由于该Name = d[0].name，行着色中出现了小而快速的毛刺，其中d没有作为 name 的属性，但是具有作为< strong>姓名（大写N）
```
Name = d[0].Name;
```

现在，代码的主要问题是您试图将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')
   .....

使用＃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，然后根据文本的 width 使用getBBox来应用x使文本居中。随时根据需要调整dy，dx。

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

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

希望这会有所帮助。而且，如果您有任何建议，请参考this以向折线图添加数据点。

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

1 个答案: