通过 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);