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文件渲染我的圈子

回答

相關問題