Question

我的代码旨在绘制简单的圆圈。数据（cx，cy，r和颜色）位于json文件中。所以我想提取它们绘制，但我得到这个错误：TypeError：e未定义。我的错误在哪里？仅显示svg元素，但我的圈子中没有任何内容。我试图简化代码，但似乎我的代码没有读取我的json文件。

这是我的json文件：

[{
  "jsonCircles": [
   {"cx": 30, "cy": 30, "r": 20, "color" : "red"}, 
   {"cx": 70, "cy": 70, "r": 20, "color" : "red"}, 
   {"cx": 110, "cy": 100, "r": 20, "color" : "red"}
  ]
}]

我的代码：

var svgContainer = d3.select("body").append("svg")
                                    .attr("width", 200)
                                    .attr("height", 200);


d3.json("circles.json", function(error, data) {
   if (error) alert(error);

   var myCircles = svgContainer.selectAll("circle")
      .data(data.jsonCircles)
      .enter()
      .append("circle");


var circleAttributes = myCircles
                       .attr("cx", function (d) { return d.cx; })
                       .attr("cy", function (d) { return d.cy; })
                       .attr("r", function (d) { return d.r; })
                       .style("fill", function(d) { return d.color; });

});

提前致谢，

Answer 1

$ ./a x y
25: 1
22: 1
19: 1

错误编号1的说明：

d3.json("circles.json", function(error, data) {
   if (error) alert(error);
     var myCircles = svgContainer.selectAll("circle")
          .data(data.jsonData)//Error number 1
          .enter()
          .append("circle");
    });//Error number 2

var circleAttributes = circles // Error number 3
                       .attr("cx", function (d) { return d.cx; })
                       .attr("cy", function (d) { return d.cy; })
                       .attr("r", function (d) { return d.r; })
                       .style("fill", function(d) { return d.color; });

在上面的行中，数据对象保存您的文件数据，如格式

d3.json("circles.json". function(error, data){})

因此，为了指向您的圈子，您需要将其写为

data =     [{
      "jsonCircles": [
       {"cx": 30, "cy": 30, "r": 20, "color" : "red"}, 
       {"cx": 70, "y": 70, "r": 20, "color" : "red"}, 
       {"cx": 110, "y": 100, "": 20, "color" : "red"}
      ]
    }]

错误编号2的说明：

不要自己关闭它的功能，我们需要在完成所有工作后关闭它。就像创建圆圈，设置属性，填充颜色一样。

错误编号3的说明：

您正在使用.data(data.jsonCircles)对象，但这取决于您是否已声明，并且根据上述代码，您需要使用circles而不是myCircles，并将此代码保留在circles内因为我们只能在获取数据后设置圆的属性。好

希望你明白，如果不是再问我了。

d3.json("circles.json", function(error, data){

上面的粗体函数（闭包）将调用var circleAttributes = circles .attr("cx", **function (d) { return d.cx; }**) .attr("cy", **function (d) { return d.cy; }**) .attr("r", **function (d) { return d.r; }**) .style("fill", **function(d) { return d.color; }**);数组中存在的JSON对象/记录/行的数量。我们已经写了data.jsonCircles，d.cx，d.cy来设置圈子的d.r，cx，cy属性。我们需要制作确保我们所有的记录/行都具有这些属性。好

为了确保我们所有记录都具有特定属性，我们可以像这样编写代码

添加条件以检查属性是否存在

function (d) { return d.cx; }

或者我们也可以这样写

function (d) { 
 if(d.cx){
  return d.cx; 
 }else{
  return 2;//Here we are returning static value
 }
}

i 的说明 {3}传递function(d, i){ if(d.cx){ return d.cx; }else{ return i*2;//See below for description about i } }，i引用记录的索引，如第一条记录i将保留0，第二条记录为1，依此类推。

我认为你是初学者，你需要学习更多东西。

Answer 2

我解决了我的问题。事实上，D3js库没有正确地从网址加载。我在本地添加了图书馆，现在它正在工作。

此外，json数据周围的括号不是必需的。

感谢所有帮助过我的人！

D3.js无法从json文件渲染我的圆圈

2 个答案: