javascript - 需要帮助重构到 D3.js V5（来自 V2）

Question

我正在尝试重构我的代码以使其与 d3.js v5 兼容（它与 v2 兼容）。

我正在梳理这里的文档，但我仍然感到困惑。 https://github.com/d3/d3/blob/master/CHANGES.md

这是我的原始代码块（D3.js v2）：

<script src="js/libs/d3.v2.js"></script>

var pack = d3.layout.pack()
  .sort(null)
  .size([width, height])
  .children(function(d) { return d.values; })
  .value(function(d) { return d.radius * d.radius; })
  .nodes({values: d3.nest()
    .key(function(d) { return d.cluster; })
    .entries(nodes)});

这很好用。但是当我进行以下更改时...

<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://d3js.org/d3-array.v2.min.js"></script>
<script src="https://d3js.org/d3-color.v2.min.js"></script>
<script src="https://d3js.org/d3-format.v2.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v2.min.js"></script>
<script src="https://d3js.org/d3-time.v2.min.js"></script>
<script src="https://d3js.org/d3-time-format.v3.min.js"></script>
<script src="https://d3js.org/d3-scale.v3.min.js"></script>

// var pack = d3.layout.pack()
var pack = d3.pack()
  .sort(null)
  .size([width, height])
  .children(function(d) { return d.values; })
  .value(function(d) { return d.radius * d.radius; })
  .nodes({values: d3.nest()
    .key(function(d) { return d.cluster; })
    .entries(nodes)});

我得到：

Uncaught (in promise) TypeError: d3.pack(...).sort is not a function

我有点困惑，因为我将更改d3.layout.pack()从d3.pack()...

这是我的 csv 的快照：

index | name | rating | type | city | state | ...
1.      bob.    7.       man.   nyc.    ny

任何帮助将不胜感激

标签： javascriptd3.jsrefactoringdata-visualization