“d3.select(...) 不是函数”答案

【问题标题】："d3.select(...) is not a function"“d3.select(...) 不是函数”
【发布时间】：2021-04-09 23:20:56
【问题描述】：

刚刚启动 D3，我在控制台中收到错误消息，提示“d3.select(...) 不是函数”。

我不确定是因为我在链接函数还是其他一些时髦的原因。我正在使用 D3 的 v5。它存在于我的 HTML 代码的正文中。

另外，这是我的导师提供的代码，他们的代码运行良好。感谢任何 cmets 或帮助！

javascript 代码

//define canvas area and margins
//svg container
var svgHeight = 1000;
var svgWidth = 1000;

//define margins
var margins = {
    top: 50,
    right: 50,
    bottom: 50,
    left: 50
};
//create chart dims
var chartheight = svgHeight - margins.top - margins.bottom;
var chartWidth = svgWidth - margins.right - margins.left;

//create svg container
**var svg = d3.select("#scatter").append("svg")
.attr("height", svgHeight)
.atrr("width", svgWidth);** < --------------------------where the error gets thrown


// reading data from csv
data = d3.csv("./assets/data/data.csv")
console.log(data);

【问题讨论】：

你是如何导入 d3 的？确保您实际上使用的是“import d3”而不是“from d3 import ...”或“import d3-path”，因为后两者实际上不会导入 d3.select
确保在你 d3 库脚本之前加载这个 js 文件

标签： javascript html d3.js

【解决方案1】：

第二个.attr() 的拼写不对。

应该是attr() 而不是atrr()

查看下面没有错误的示例

<!DOCTYPE html>
<html>
  
<head>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    
    <!--<script src="LINK TO YOUR EXTERNAL JS FILE COMES BELOW"></script>-->
</head>
   
<body>   
    <p id="scatter">Some Element</p>
</body>

<script>
  var svgHeight = 1000;
  var svgWidth = 1000;

  var margins = {
    top: 50,
    right: 50,
    bottom: 50,
    left: 50
  };

  var chartheight = svgHeight - margins.top - margins.bottom;
  var chartWidth = svgWidth - margins.right - margins.left;

  var svg = d3.select("#scatter")
            .append("svg")
            .attr("height", svgHeight)
            .attr("width", svgWidth);


// reading data from csv
// data = d3.csv("./assets/data/data.csv")
// console.log(data);
</script>
     
</html>

【讨论】：

很奇怪，这应该是正确的答案。注意：您将 <p> 标记中的“元素”拼错为“元素”