Uncaught TypeError：canvas.selectAll（...）。data（...）。enter在d3中不是函数 [英] Uncaught TypeError: canvas.selectAll(...).data(...).enter is not a function in d3

问题描述

当我尝试运行我的d3代码时，出现了2个错误。第一个是：

lockquote

无法加载资源net :: ERR_CONNECTION_REFUSED

第二种：

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

我正在使用MEAN与猫鼬作为我的ORM，带有用于HTML和v3的d3的句柄。

 < p>在此显示的图表
< / 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，f （d，i）{
返回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 name：six} 
] 
  

解决方案

您的JSON获取失败（ERR_CONNECTION_REFUSED），因此您的dataArray为空，导致.data失败。您应该查看为什么graphdata.json无法通过查看Angular / Node / Mongo日志来加载。

I have 2 errors coming up when I try to run my code for d3.

The first is:

Failed to load resource: net::ERR_CONNECTION_REFUSED

and the second:

Uncaught TypeError: canvas.selectAll(...).data(...).enter is not a function

I'm using MEAN with mongoose as my ORM, with handlebars for the HTML and v4 of 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>

and for

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"}
]

解决方案

Your JSON fetch is failing (ERR_CONNECTION_REFUSED), so your dataArray is empty and that's causing .data to fail. You should troubleshoot why your graphdata.json is failing to load by looking at the Angular/Node/Mongo logs.

这篇关于Uncaught TypeError：canvas.selectAll（...）。data（...）。enter在d3中不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！