将数据点和文本添加到带线的多条图上的线 [英] Add data points and text to lines on a multi-bar graph with lines

问题描述

我使用了在这里找到的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;
                        });

                })

但是，这使一条线消失了.我是将其放置在错误的位置还是丢失了一些内容来告诉代码以该行结束并继续?

解决方案

1. 首先，由于Name = d[0].name，线着色中出现了小而快速的毛刺，其中d没有属性为 name ，但确实有一个属性为 Name (大写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，然后使用 https://bl.ocks.org/shashank2104/2acfdd38dc262285d2

   希望这会有所帮助.如果您有意见，请参考此，以便将数据点添加到行中图表.

I used the d3 pre-built chart found here:

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

It works great and everything is pulling the way it is supposed to. However, it's been requested that the lines have data points added with the text of the value for each point above it.

I have placed some code for text here:

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

                })

That makes one line disappear, however. Am I placing this in the wrong spot or am I missing something to tell the code to finish with the line and continue?

解决方案

1. Firstly, a minor and quick glitch in the line coloring is due to this Name = d[0].name where d has no attribute as name but does have one as Name (capital N)

   Name = d[0].Name;
   

2. Now, the main issue with your code is that you're trying to append text to the path which would never work. The way you should do is:

   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. Using the logic in #2, append the texts for each element in d and assign x, y and text accordingly. Here's how:

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

   If you notice the above code, I'm assigning the text first and then applying x based on the width of the text using getBBox to center the text at the point. Feel free to adjust dy, dx according to your requirements.

   Putting together all of the above, here's a fork of that code:

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

   Hope this helps. And if you're up for suggestions, please refer this for adding data-points to a line chart.

这篇关于将数据点和文本添加到带线的多条图上的线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！