d3.layout.cloud 不是函数答案

【问题标题】：d3.layout.cloud is not a functiond3.layout.cloud 不是函数
【发布时间】：2016-09-28 14:25:26
【问题描述】：

*d3.layout.cloud() 抛出错误：d3.layout.cloud 不是函数。

我在TypeError: d3.layout.cloud is not a function 尝试过 Adam Pearce 的回答，但这对我不起作用。

谁能告诉我我做错了什么。

我正在使用 d3 版本 3

文件

d3.json(inputData, (data)=>{
var cloud = d3.layout.cloud().size([800, 300])
  .words(data["subtype"])
  .fontSize((d)=>{ return  d.values.length + "px"; })
  .on("end", draw )
  .start();

    function draw(words){
      // Text charts
      const text = svgCanvas.selectAll("#text_chart")
            .data(words)
            .enter()
              .append("text")
              .attr("id", "text_chart")
              .attr("fill", (d,i)=>{ return color(i) })
              .attr("transform", (d,i)=>{ return "translate( 20 , "+Math.floor(Math.random()*(d.values.length*2))+")" })
              .style("font-size", (d)=>{ return d.values.length + "px"; })
              .style("position","absolute")
              .style("top", (d)=>{return Math.floor(Math.random()*d.values.length) })
              .style("left", (d)=>{return Math.floor(Math.random()*d.values.length) })
              .text((d)=>{ return d.key });
    }
  }

<!DOCTYPE>
<html>
<head>
  <meta charset="UTF-8"/>
  <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
  <link rel="stylesheet" href="./css/style.css" media="screen" title="no title">
  <title>Test</title>
</head>
<body>
  <h2>Stuff my phone tracks</h2>
  <small>Filter</small>
    <label><input id="bars" type="radio" name="chartToggle" value="Bars"> Bars
    </label>
    <label><input id="text" type="radio" name="chartToggle" value="Text"> Text
    </label>
    <label><input id="all" type="radio" name="chartToggle" value="All"> All
    </label>


  <div id="canvas"></div>


  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="https://gist.github.com/emeeks/3361332/raw/61cf57523fe8cf314333e5f60cc266351fec2017/d3.layout.cloud.js"></script>  <script src="./main.js"></script>
  <script src="./main.js"></script>
</body>
</html>

【问题讨论】：

标签： javascript d3.js data-visualization

【解决方案1】：

我已经让它工作了，但是在 Node.js 环境中。
但是你需要 npm install d3-cloud （在这个例子中，我使用的是 1.2.5 版本）

参见下面的工作示例

index.html

<!DOCTYPE html>
<html>
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <script defer src="src/app.js"></script>
  <head>
    <title>Word Cloud Example</title>
  </head>
  <style>
  </style>
  <body>
  </body>
</html>

/src/app.js

import cloud from "d3-cloud";

const frequency_list = [
  { text: "text", size: 32 },
  { text: "sleight", size: 12 },
  { text: "hand", size: 12 },
  { text: "magic", size: 12 },
  { text: "future", size: 24 },
  { text: "read", size: 20 },
  { text: "mind", size: 12 },
  { text: "training", size: 24 },
  { text: "amp", size: 72 },
  { text: "question", size: 44 },
  { text: "thing", size: 32 },
];

var color = d3.scale
  .linear()
  .domain([0, 1, 2, 3, 4, 5, 6, 10, 15, 20, 100])
  .range([
    "#ddd",
    "#ccc",
    "#bbb",
    "#aaa",
    "#999",
    "#888",
    "#777",
    "#666",
    "#555",
    "#444",
    "#333",
    "#222"
  ]);

cloud()
  .size([800, 300])
  .words(frequency_list)
  .rotate(0)
  .fontSize(function(d) {
    return d.size;
  })
  .on("end", draw)
  .start();

function draw(words) {
  d3.select("body")
    .append("svg")
    .attr("width", 850)
    .attr("height", 350)
    .attr("class", "wordcloud")
    .append("g")
    // without the transform, words words would get cutoff to the left and top, they would
    // appear outside of the SVG area
    .attr("transform", "translate(320,200)")
    .selectAll("text")
    .data(words)
    .enter()
    .append("text")
    .style("font-size", function(d) {
      return d.size + "px";
    })
    .style("fill", function(d, i) {
      return color(i);
    })
    .attr("transform", function(d) {
      return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
    })
    .text(function(d) {
      return d.text;
    });
}

例子可以看这里： codesandbox

【讨论】：

外部链接将来可能会失效。请在您的答案中包含实际的解决方案
@SylvanDAsh 我明白了。感谢您的建议。