慕絲7291255
2023-06-29 22:28:24
我正在嘗試顯示數組的值,但由于某種原因它只顯示 NaN...有人可以幫助完成這項工作嗎?提前致謝。 <td> <div class="values"> {{ value1 }} </div> </td> <td> <div class="values"> {{ value2 }} </div> </td> <td> <div class="values"> {{ value3 }} </div> </td> var data = d3.selectAll('.values').nodes(); console.log(data); var pie = d3.pie() //we create this variable, for the values to be readeable in the console .value(function(d) {return d.value; })(data); console.log(pie);{{ Value1 }}、{{ Value2 }} 和 {{ Value 3 }} 已正確部署,這是來自 html 的圖片:
1 回答

DIEA
TA貢獻1820條經驗 獲得超3個贊
您最近的問題使用文本輸入元素來創建餅圖。這些元素有一個稱為 的屬性value
。div 則不然。
當您使用它時,whered
指的是一個元素:
.value(function(d)?{return?d.value;?})(data);
輸入元素將返回一個值,而 div 將返回未定義。因此你的 NaN 錯誤:
console.log("div.value: ",d3.select("div").node().value);
console.log("input.value: ",d3.select("input").node().value);
console.log("input value an empty string: that's the content of the field");
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div>text</div>
<input></input>
但是,如果您的 div 元素僅包含相關文本,那么我們可以使用類似的方法element.innerHtml
來獲取數據。
console.log(d3.select("div").node().innerHTML);
<script?src="? <div>50</div>
如果你交換:
var?pie?=?d3.pie()??? ????.value(function(d)?{return?d.value;?})(data);
和:
var?pie?=?d3.pie()??? ????.value(function(d)?{return?d.innerHTML;?})(data);
您應該有一個可行的解決方案。
請注意,在這兩種情況(輸入或 div)中,輸入都是字符串,這可能會導致問題,具體取決于您使用數據的方式,將數據強制為數字通常是一個好主意,您可以使用一元來做到這一點+
:
var?pie?=?d3.pie()??? ????.value(function(d)?{return?+d.innerHTML;?})(data);
添加回答
舉報
0/150
提交
取消