d3.csv VS d3.json：使用JSON數據

試圖瞭解mbostock的例子（here）無法讀取的未定義的屬性「長」，我在一個奇怪的問題已經運行：d3.csv VS d3.json：使用JSON數據

使用CSV數據（裝有d3.csv() ），一切正常。當使用d3.json()時，我使用JSON數據「」得到「Can not read property length'of undefined undefined，我們正在講同樣的數據，使用相同的數據格式，只是使用在線convertcsv進行轉換，數據也通過JSONLint驗證。

（我已閱讀類似信息及其有關使用JSON CSV和對象陣列數據之中，但使用本機d3.csv()和d3.json()的功能，不應該將所得數據對象是相同的？相對回答）

的CSV數據：

date,price 
Jan 2000,1394.46 
Feb 2000,1366.42 
Mar 2000,1498.58 
Apr 2000,1452.43 
May 2000,1420.6 
Jun 2000,1454.6 
Jul 2000,1430.83 
Aug 2000,1517.68 
Sep 2000,1436.51 
Oct 2000,1429.4 
Nov 2000,1314.95 
Dec 2000,1320.28

轉換後的JSON：

[ 
    { 
    "date":"Jan 2000", 
    "price":1394.46 
    }, 
    { 
    "date":"Feb 2000", 
    "price":1366.42 
    }, 
    { 
    "date":"Mar 2000", 
    "price":1498.58 
    }, 
    { 
    "date":"Apr 2000", 
    "price":1452.43 
    }, 
    { 
    "date":"May 2000", 
    "price":1420.6 
    }, 
    { 
    "date":"Jun 2000", 
    "price":1454.6 
    }, 
    { 
    "date":"Jul 2000", 
    "price":1430.83 
    }, 
    { 
    "date":"Aug 2000", 
    "price":1517.68 
    }, 
    { 
    "date":"Sep 2000", 
    "price":1436.51 
    }, 
    { 
    "date":"Oct 2000", 
    "price":1429.4 
    }, 
    { 
    "date":"Nov 2000", 
    "price":1314.95 
    }, 
    { 
    "date":"Dec 2000", 
    "price":1320.28 
    } 
]

，最後，代碼：

<!DOCTYPE html> 
<meta charset="utf-8"> 
<style> 

svg { 
    font: 10px sans-serif; 
} 

.area { 
    fill: steelblue; 
    clip-path: url(#clip); 
} 

.axis path, 
.axis line { 
    fill: none; 
    stroke: #000; 
    shape-rendering: crispEdges; 
} 

.brush .extent { 
    stroke: #fff; 
    fill-opacity: .125; 
    shape-rendering: crispEdges; 
} 

</style> 
<body> 
<script src="..\d3.v3.min.js"></script> 
<script> 

var margin = {top: 10, right: 10, bottom: 100, left: 40}, 
    margin2 = {top: 430, right: 10, bottom: 20, left: 40}, 
    width = 960 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom, 
    height2 = 500 - margin2.top - margin2.bottom; 

var parseDate = d3.time.format("%b %Y").parse; 

var x = d3.time.scale().range([0, width]), 
    x2 = d3.time.scale().range([0, width]), 
    y = d3.scale.linear().range([height, 0]), 
    y2 = d3.scale.linear().range([height2, 0]); 

var xAxis = d3.svg.axis().scale(x).orient("bottom"), 
    xAxis2 = d3.svg.axis().scale(x2).orient("bottom"), 
    yAxis = d3.svg.axis().scale(y).orient("left"); 

var brush = d3.svg.brush() 
    .x(x2) 
    .on("brush", brushed); 

var area = d3.svg.area() 
    .interpolate("monotone") 
    .x(function(d) { return x(d.date); }) 
    .y0(height) 
    .y1(function(d) { return y(d.price); }); 

var area2 = d3.svg.area() 
    .interpolate("monotone") 
    .x(function(d) { return x2(d.date); }) 
    .y0(height2) 
    .y1(function(d) { return y2(d.price); }); 

var svg = d3.select("body").append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom); 

svg.append("defs").append("clipPath") 
    .attr("id", "clip") 
    .append("rect") 
    .attr("width", width) 
    .attr("height", height); 

var focus = svg.append("g") 
    .attr("class", "focus") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

var context = svg.append("g") 
    .attr("class", "context") 
    .attr("transform", "translate(" + margin2.left + "," + margin2.top + ")"); 

d3.json("singlestock.json", type, function(error, data) { 
//d3.csv("singlestock.csv", type, function(error, data) { 
    x.domain(d3.extent(data.map(function(d) { return d.date; }))); 
    y.domain([price, d3.max(data.map(function(d) { return d.price; }))]); 
    x2.domain(x.domain()); 
    y2.domain(y.domain()); 

    focus.append("path") 
     .datum(data) 
     .attr("class", "area") 
     .attr("d", area); 

    focus.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis); 

    focus.append("g") 
     .attr("class", "y axis") 
     .call(yAxis); 

    context.append("path") 
     .datum(data) 
     .attr("class", "area") 
     .attr("d", area2); 

    context.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height2 + ")") 
     .call(xAxis2); 

    context.append("g") 
     .attr("class", "x brush") 
     .call(brush) 
    .selectAll("rect") 
     .attr("y", -6) 
     .attr("height", height2 + 7); 
}); 

function brushed() { 
    x.domain(brush.empty() ? x2.domain() : brush.extent()); 
    focus.select(".area").attr("d", area); 
    focus.select(".x.axis").call(xAxis); 
} 

function type(d) { 
    d.date = parseDate(d.date); 
    d.price = +d.price; 
    return d; 
} 

</script>

（接近100％從mbostock的例子here）在代碼中，只是取消對只註釋行從CSV切換到JSON。

-----編輯--- 按nikosh回答：這個問題是固定在這樣：

d3.json("singlestock.json", function(error, data) { 
     data.forEach(function(d) { 
     d.date = parseDate(d.date); 
     d.price = +d.price; 
     d.NAgg = +d.NAgg; 
    });

來源

2015-11-10 Aldo

比較的d3.json

d3.json(url[, callback])

的簽名和您實際的來電

d3.json("singlestock.json", type, function(error, data) {... });

您忘記刪除type從你的論點，使用

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

來源

2015-11-10 15:29:49 nikoshr

實際上，這是故意的，是我嘗試使它的工作絕望的舉動之一。切換到： d3.json（「singlestock.json」，功能（錯誤，數據）{[...] 實際上導致此錯誤： '當d =「MNaN，4.059485530546625CNaN，4.059485530546625，NaN時，4.983263929155024 ，NaN時，4.983263929155024SNaN，0.6292499077539426，NaN時，0.6292499077539426SNaN，2.1496626429813928，NaN時，2.1496626429813928SNaN，3.1983026725001364，NaN時，3.1983026725001364SNaN，2.078171946655427，NaN時，2.078171946655427SNaN，2.8612751041062703，NaN時，2.8612751041062703SNaN，0，NaN時，0SNaN，2.674147382847508，NaN的，2.674147382847508SNaN，2.90838648463444，NaN' – Aldo

nikoshr是對的，我犯了另一個錯誤：我必須在數據循環中移動TYPE函數： d3.json（「singlestock.json」，function（error ，data）{ \t data.forEach（function（d）{ d.date = parseDate（d.date）; d.price = + d.price; \t \t d.NAgg = + d.NAgg; }）;' – Aldo

d3.csv VS d3.json：使用JSON數據

回答

相關問題