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

我的代码旨在绘制简单的圆圈。数据（cx，cy，r和颜色）位于json文件中。所以我想提取它们来绘制，但我得到这个错误：TypeError：e是未定义的。我的错误在哪里？只有svg元素出现，但没有任何关于我的圈子。我试图简化代码，但似乎我的代码不读取我的json文件。D3.js无法从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; }); 

});

由于提前，

来源

2015-04-28 Auri

你在哪儿申报'圈子？ –

btw。你的JSON无效 - 第3个圆圈“”而不是“r” –

另外你的JSON在第二个和第三个圆圈中有“y”而不是“cy”属性。 – Paul

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; });

说明有关错误编号1：

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

因此，为了指向你的圈子中，你需要把它写成

.data(data.jsonCircles)

说明与错误号2：

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

说明有关错误编号3：

这里使用的是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,r属性的circle.We需要确保我们所有的记录/行都具有这些属性。好

要确保我们所有的记录都具有特定的属性，我们可以这样写

function (d) { return d.cx; }

代码添加一个条件来检查属性是否存在与否

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

，或者我们也可以这样写

function(d, i){ 
if(d.cx){ 
    return d.cx; 
}else{ 
    return i*2;//See below for description about i 
} 
}

i的描述 i由d3传递，而i指的是第一条记录的记录索引i将保存为0，第二条记录为1等等。

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

来源

2015-04-28 11:26:42

非常感谢您的快速回答！我尝试了这么多的可能性，我让几个代码错误（对我来说是羞耻！）。现在我纠正了它们，但仍然有提到的错误。我真的不明白为什么。我想尝试[本教程]（https://www.dashingd3js.com/using-json-to-simplify-code），但使用json文件。 – Auri

好的，那么我们该如何做到这一点：“...以确保我们所有的记录/行都具有这些属性”？ – Auri

我解决了我的问题。实际上，D3js库没有从url正确加载。我在本地添加了库，现在它正在工作。

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

感谢所有帮助过我的人！

来源

2015-04-29 13:11:30 Auri

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

回答

相关问题