Question

当我尝试运行d3的代码时，我遇到了2个错误。

第一个是：

无法加载资源：net :: ERR_CONNECTION_REFUSED

和第二个：

未捕获TypeError：canvas.selectAll（...）。data（...）。enter不是函数

我正在使用MEAN和猫鼬作为我的ORM，其中包含用于HTML和v3的d3的把手。

<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>

和

graphdata.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无法加载的问题。

未捕获的TypeError：canvas.selectAll（...）。data（...）。enter不是d3中的函数

1 个答案: