未捕获的类型错误：canvas.selectAll(...).data(...).enter 不是 d3 中的函数

Question

当我尝试为 d3 运行代码时出现 2 个错误。

第一个是：

加载资源失败：net::ERR_CONNECTION_REFUSED

第二个：

未捕获的类型错误：canvas.selectAll(...).data(...).enter 不是函数

我使用 MEAN 和 mongoose 作为我的 ORM，带有用于 HTML 的把手和 d3 的 v4。

<p>graph displayed here
</p>
<script>
d3.json("graphdata.json", function(dataArray) {
  console.log(dataArray);
  var width = 500;
  var height = 500;
  console.log(width);

  var widthScale = d3.scaleLinear().domain([0, 420]).range([0, width]);
  var color = d3.scaleLinear().domain([0, 420]).range(["red", "blue"]);
  var xAxis = d3.axisBottom(widthScale);

  var canvas = d3.select("p")
    .append("svg")
    .attr("width", width)
    .attr("height", height);


  var bar = canvas.selectAll("rect")
    .data(dataArray)
    .enter()
    .append("rect")
    .attr("width", function(d) {
      return d.age * 10;
    })
    .attr("height", 50)
    .attr("y", function(d, i) {
      return i * 50
    })
    .attr("fill", "blue");


  canvas.selectAll("text")
    .data(dataArray)
    .enter()
    .append("text")
    .attr("fill", "white")
    .attr("y", function(d, i) {
      return i * 50 + 24;
    })
    .text(function(d) {
      return d.name;
    });


});
</script>

对于

图形数据.json

[
  {"age":10,"name":"one"},
  {"age":20,"name":"two"},
  {"age":30,"name":"three"},
  {"age":40,"name":"four"},
  {"age":50,"name":"five"},
  {"age":60,"name":"six"}
]

Answer 1

您的 JSON 提取失败 (ERR_CONNECTION_REFUSED)，因此您的 dataArray 为空，这导致 .data 失败。您应该通过查看 Angular/Node/Mongo 日志来解决您的 graphdata.json 加载失败的原因。