How do I add labels from another column to a multiline graph in d3?

Viewed 15

I am trying to create a multiline graph in d3 using data that looks like this. I was able to graph A1 and B1 as line charts.

[
{id: A1,
values: [
        {date: 20-Jul-2019, measurement: 1}
        {date: 21-Jul-2019, measurement: 2}
        {date: 22-Jul-2019, measurement: 3}
        {date: 23-Jul-2019, measurement: 4}
        ]
},
{id: A2,
values: [
        {date: 20-Jul-2019, measurement: 101}
        {date: 21-Jul-2019, measurement: 102}
        {date: 22-Jul-2019, measurement: 103}
        {date: 23-Jul-2019, measurement: 104}
        ]
},
{id: B1,
values: [
        {date: 20-Jul-2019, measurement: 5}
        {date: 21-Jul-2019, measurement: 6}
        {date: 22-Jul-2019, measurement: 7}
        {date: 23-Jul-2019, measurement: 8}
        ]
},
{id: B2,
values: [
        {date: 20-Jul-2019, measurement: 105}
        {date: 21-Jul-2019, measurement: 106}
        {date: 22-Jul-2019, measurement: 107}
        {date: 23-Jul-2019, measurement: 108}
        ]
},
]

Now, I need to put A2 and B2 next to the lines that come from A1 and B1. So A2 for July 20, 2019 which is 101 will show at A1 for July 20, 2019 which is 1.

So far, this is what I have been able to come up with, and the text doesn't show. However, if I change in .text [A2, B2] to [A1, B1] it will show A1 and B1 labels.

twos = symbols.append('g')
          .selectAll('text')
          .data(slices)
          .enter()

          
var twos_c = twos.append('g')
    .selectAll('text-2')
    .data(function(d) {return d.values})
    .enter()

twos_c.append('text')
    .attr('x', function(d, i, j) {if (['A1', 'B1'].indexOf(d3.select(this.parentNode).data()[0].id ) !== -1) {return xScale(d.date)};})
    .attr('y', function(d, i, j) {if (['A1', 'B1'].indexOf(d3.select(this.parentNode).data()[0].id ) !== -1) {return yScale(d.measurement)};})
    .text(function(d,i,j) {if (['A2, B2'].indexOf(d3.select(this.parentNode).data()[0].id ) !== -1) {return d.measurement};})
0 Answers
Related