通过 d3.js 显示从 div html 获取的变量值

Question

我正在尝试显示数组的值，但由于某种原因它只显示 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 的图片：

Answer 1

您最近的问题使用文本输入元素来创建饼图。这些元素有一个称为 的属性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);