d3.js - D3.js v4 布局上的 NaN 坐标

Question

尝试在表单的 JSON 输入上使用 D3.js 布局 TreeMap :

var data = {
  "name": "Top",
  "frequency": 0,
  "children": [
  {
    "name": "Per",
    "frequency": 1287
  },
  {
    "name": "Tu",
    "frequency": 133,
    "children": [
    {
      "name": "Mel",
      "frequency": 50
    }
    ]
  }
  ]
}

我在获取 x 和 y 位置时卡住了，我认为这是因为我缺乏使用 .sum() 或 .value() 来捕获频率场的知识。我想验证我的假设，所以我尝试了树形布局，只是为了查看空间组织的数据:

var svg = d3.select(".chart").append("svg")
  .attr("height", "100%")
  .attr("width", "100%");

var root = d3.hierarchy(data);

var treeLayout = d3.tree().size([+svg.attr("width"), +svg.attr("height")]);

treeLayout(root);

var nodes = root.descendants();

svg.selectAll("circle").data(nodes)
      .enter().append("circle")
        .attr("r", function(d, i) {
          return 4;
        })
        .attr("cx", function(d, i) {
          return d.x;
        })
        .attr("cy", function(d, i) {
          return d.y;
        });

和 HTML:

<style type="text/css">
  div.chart {
    height: 5000px;
  }
</style>
<div class="chart">
</div>

在控制台中登录根目录，我看到 x 和 y 字段仍然是 NaN。您看到我的代码中的错误了吗？

Answer 1

您将 SVG 的宽度和高度设置为百分比:

var svg = d3.select("body").append("svg")
    .attr("height", "100%")
    .attr("width", "100%");

因此，当您使用 getter 时，您会检索到字符串 100%:

var svg = d3.select("body").append("svg")
  .attr("height", "100%")
  .attr("width", "100%");

console.log(svg.attr("width"))

<script src="https://d3js.org/d3.v4.min.js"></script>

当然，对这样的字符串使用一元加号会得到 NaN:

console.log(+"100%")

并且您将那些 NaN 传递给 d3.tree().size()。

有几种解决方案，最简单的一种就是将数字传递给布局尺寸。但是，由于您使用的是 "100%"，我们可以假设您不知道 SVG 的大小。

所以，我这里的解决方案(同样，不是唯一可能的解决方案)是使用 d3.style 来获取以像素为单位的属性，而不是百分比(但仍然是一个字符串)...

var svg = d3.select("body").append("svg")
  .attr("height", "100%")
  .attr("width", "100%");

console.log(d3.style(svg.node(), "width"))

<script src="https://d3js.org/d3.v4.min.js"></script>

...然后使用parseInt()(或任何其他方法)摆脱那个px:

var svg = d3.select("body").append("svg")
  .attr("height", "100%")
  .attr("width", "100%");

console.log(parseInt(d3.style(svg.node(), "width")))

<script src="https://d3js.org/d3.v4.min.js"></script>

最后，如果您不想处理字符串，只需使用 getBoundingClientRect()，它将返回一个数字:

var svg = d3.select("body").append("svg")
  .attr("height", "100%")
  .attr("width", "100%");

console.log(svg.node().getBoundingClientRect().width);

<script src="https://d3js.org/d3.v4.min.js"></script>