這是我遇到問題的一些代碼：
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;
});
}
這是Chart課程的一部分。當 I 時console.log sec，我得到一個包含 4 個組的選擇物件，其中 2 個是空的（另外兩個是我的軸物件）。我的圖形看起來很好，并且在創建圖形后呼叫了 addLabels()，并且線元素被正確分類。如果問題不明顯，并且您想要其余的代碼，我很樂意將其粘貼進去 - 謝謝。
編輯：我想問題可能出在第四行，(enter().append("g")所以我join("g")改用了。這是我收到的錯誤：
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)
也許這將提供進一步的見解。
uj5u.com熱心網友回復：
固定的：
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;
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/325991.html
標籤：javascript d3.js
上一篇：d3：如何獨立于背景拖動線元素