简体   繁体   中英

Appended labels not appearing in chart d3.js

Here's the bit of code I'm having trouble with:

addLabels(){
    let sec = this.plot.selectAll(".line")
                  .data(this.keymap)
                  .enter().append("g")
                  .attr("class", "stock");

              sec.join("text")
                 .datum(d => ({
                     name: d.name,
                     value: d.values[d.values.length-1]
                   }))
                 .attr("transform", d => {"translate(" + this.xScale(d.value.date) + "," + this.yScale(d.value.key) + ")"}
                 )
                 .attr("x", 7)
                 .attr("dy", ".3em")
                 .style("fill", "black")
                 .style('font-family', 'Helvetica')
                 .style('font-size', '11px')
                 .style('letter-spacing', '1px')
                 .style('text-transform', 'uppercase')
                 .text(function(d){
                   return d.name;
                 });
  }

This is part of a Chart class. When I console.log sec , I get a selection object with 4 groups, 2 of which are empty (the other two are my axis objects). My graph appears fine and addLabels() is called after the graph is made, and the line elements are classed correctly. If the issue is not apparent and you'd like the rest of the code, I'm happy to paste it in- Thank you.

Edit: I thought perhaps the issue might be in the fourth line (enter().append("g") so I used join("g") instead. This is the error I received:

d3.v6.js:1712 Uncaught (in promise) TypeError: node.compareDocumentPosition is not a function
    at Selection$1.selection_order [as order] (d3.v6.js:1712)
    at Selection$1.selection_join [as join] (d3.v6.js:1686)
    at Chart.addLabels (chart.js:122)
    at Chart.draw (chart.js:31)
    at Chart.setData (chart.js:160)
    at init (plot.js:4)

Maybe this will provide further insight.

Fixed:

let sec = this.plot.selectAll(".line")
                  .data(this.keymap)
                  .enter().append("g")
                  .attr("class", "stock");

              sec.append("text") //literally just append instead of join lol
                 .datum(d => ({
                     name: d.name,
                     value: d.values[d.values.length-1]
                   }))
                 .attr("transform", d => "translate(" + this.xScale(d.value.date)
                                                      + "," + this.yScale(d.value.key)
                                                      + ")"
                 )
                 .attr("x", 7)
                 .attr("dy", ".3em")
                 .style("fill", "black")
                 .style('font-family', 'Helvetica')
                 .style('font-size', '11px')
                 .style('letter-spacing', '1px')
                 .style('text-transform', 'uppercase')
                 .text(function(d){
                   return d.name;
                 });

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM