1. 首頁
  2. 問答
  3. D3.js - 如何使用內聯JSON作爲D3圖表的數據集，而不是csv/tsv/json文件

D3.js - 如何使用內聯JSON作爲D3圖表的數據集，而不是csv/tsv/json文件

2017-04-26 40 views
1

我在我的應用程序中實現D3.js圖表​​，我不想使用文件作爲數據集，我只想使用內聯JSON作爲數據集（JSON將在應用程序中動態生成）。D3.js - 如何使用內聯JSON作爲D3圖表的數據集，而不是csv/tsv/json文件

我已經使用以下代碼完成了Reusable Responsive Multiline Chart的實施。

 
var data1 = [ { "My JSON data here" } ]; 

d3.json('', function (error, data) { 

    data1.forEach(function (d) { 
     d.year = +d.year; 
     d.variableA = +d.variableA; 
     d.variableB = +d.variableB; 
     d.variableC = +d.variableC; 
     d.Temp = +d.Temp; 
    }); 

    var chart = makeLineChart(data1, 'year', { 
     'Device 1': { column: 'variableA' }, 
     'Device 2': { column: 'variableB' }, 
     'Device 3': { column: 'variableC' }, 
     'Device 4': { column: 'variableD' } 
    }, { xAxis: 'Years', yAxis: 'Temperature' }); 
    chart.bind("#chart-line1"); 
    chart.render(); 
});

這裏我打電話d3.json（），但文件名是空白，也有沒有用的代碼數據的。我使用'data1'而不是'data'。 它完美的作品...

現在我想達到同樣的Grouped Bar Chart，但這聊天數據綁定方法比「可重複使用的響應多線圖」不同。 以下是解析「分組條形圖」數據的代碼。

d3.csv("\\data.csv", function(d, i, columns) { 
    for (var i = 1, n = columns.length; i < n; ++i) d[columns[i]] = +d[columns[i]]; 
    return d; 
}, function(error, data) { 
    if (error) throw error; 

    var keys = data.columns.slice(1); 

    // Rest of code to bind parsed data to chart 
});

完整代碼在Grouped Bar Chart

所以我怎麼能與在線JSON這裏更換data.csv。

來源

2017-04-26 Shri

+0

嘗試[{ 「我在這裏的JSON數據」}]添加'd =;'上的第二行，之後d3.csv'（）'和前'for' – TheBiro

+0

@TheBiro您是說說，替換「\\ dat a.csv「with'd = [{」這裏是我的JSON數據「}];'將工作？我不清楚在哪裏添加d = [{「我的JSON數據在這裏」}] ;. – Shri

+0

只是刪除對'd3.json'的調用並使用您生成的數據 – thedude

回答

2

方法d3.json和d3.csv是AJAX調用，用於從服務器獲取數據。如果你有內聯的JSON，你不需要這些調用。你的第一個例子就是這樣的，這只是一個副作用。您的d3.json致電失敗但仍然執行回撥功能。這只是非必要的，應該寫成：

var data1 = [ { "My JSON data here" } ]; 

data1.forEach(function (d) { 
    d.year = +d.year; 
    d.variableA = +d.variableA; 
    d.variableB = +d.variableB; 
    d.variableC = +d.variableC; 
    d.Temp = +d.Temp; 
}); 

var chart = makeLineChart(data1, 'year', { 
    'Device 1': { column: 'variableA' }, 
    'Device 2': { column: 'variableB' }, 
    'Device 3': { column: 'variableC' }, 
    'Device 4': { column: 'variableD' } 
}, { xAxis: 'Years', yAxis: 'Temperature' }); 
chart.bind("#chart-line1"); 
chart.render();

關於你的第二個圖表再次調用d3.csv是沒有必要的。然而，從CSV格式到JSON發生了一些處理。你需要複製在創建JSON和圖表的其他工作，你會需要這樣的東西：

... 

var z = d3.scaleOrdinal() 
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); 

var data = [{"State":"CA","Under 5 Years":2704659,"5 to 13 Years":4499890,"14 to 17 Years":2159981,"18 to 24 Years":3853788,"25 to 44 Years":10604510,"45 to 64 Years":8819342,"65 Years and Over":4114496},{"State":"TX","Under 5 Years":2027307,"5 to 13 Years":3277946,"14 to 17 Years":1420518,"18 to 24 Years":2454721,"25 to 44 Years":7017731,"45 to 64 Years":5656528,"65 Years and Over":2472223}]; 

var keys = ["Under 5 Years", "5 to 13 Years", "14 to 17 Years", "18 to 24 Years", "25 to 44 Years", "45 to 64 Years", "65 Years and Over"] 

x0.domain(data.map(function(d) { return d.State; })); 
x1.domain(keys).rangeRound([0, x0.bandwidth()]); 

...

下面是運行的代碼沒有調用d3.csv：

<!DOCTYPE html> 
 
<style> 
 

 
.axis .domain { 
 
    display: none; 
 
} 
 

 
</style> 
 
<svg width="960" height="500"></svg> 
 
<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<script> 
 

 
var svg = d3.select("svg"), 
 
    margin = {top: 20, right: 20, bottom: 30, left: 40}, 
 
    width = +svg.attr("width") - margin.left - margin.right, 
 
    height = +svg.attr("height") - margin.top - margin.bottom, 
 
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
 

 
var x0 = d3.scaleBand() 
 
    .rangeRound([0, width]) 
 
    .paddingInner(0.1); 
 

 
var x1 = d3.scaleBand() 
 
    .padding(0.05); 
 

 
var y = d3.scaleLinear() 
 
    .rangeRound([height, 0]); 
 

 
var z = d3.scaleOrdinal() 
 
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); 
 

 
var data = [{"State":"CA","Under 5 Years":2704659,"5 to 13 Years":4499890,"14 to 17 Years":2159981,"18 to 24 Years":3853788,"25 to 44 Years":10604510,"45 to 64 Years":8819342,"65 Years and Over":4114496},{"State":"TX","Under 5 Years":2027307,"5 to 13 Years":3277946,"14 to 17 Years":1420518,"18 to 24 Years":2454721,"25 to 44 Years":7017731,"45 to 64 Years":5656528,"65 Years and Over":2472223},{"State":"NY","Under 5 Years":1208495,"5 to 13 Years":2141490,"14 to 17 Years":1058031,"18 to 24 Years":1999120,"25 to 44 Years":5355235,"45 to 64 Years":5120254,"65 Years and Over":2607672},{"State":"FL","Under 5 Years":1140516,"5 to 13 Years":1938695,"14 to 17 Years":925060,"18 to 24 Years":1607297,"25 to 44 Years":4782119,"45 to 64 Years":4746856,"65 Years and Over":3187797},{"State":"IL","Under 5 Years":894368,"5 to 13 Years":1558919,"14 to 17 Years":725973,"18 to 24 Years":1311479,"25 to 44 Years":3596343,"45 to 64 Years":3239173,"65 Years and Over":1575308},{"State":"PA","Under 5 Years":737462,"5 to 13 Years":1345341,"14 to 17 Years":679201,"18 to 24 Years":1203944,"25 to 44 Years":3157759,"45 to 64 Years":3414001,"65 Years and Over":1910571}]; 
 

 
var keys = ["Under 5 Years", "5 to 13 Years", "14 to 17 Years", "18 to 24 Years", "25 to 44 Years", "45 to 64 Years", "65 Years and Over"]; 
 

 
    x0.domain(data.map(function(d) { return d.State; })); 
 
    x1.domain(keys).rangeRound([0, x0.bandwidth()]); 
 
    y.domain([0, d3.max(data, function(d) { return d3.max(keys, function(key) { return d[key]; }); })]).nice(); 
 

 
    g.append("g") 
 
    .selectAll("g") 
 
    .data(data) 
 
    .enter().append("g") 
 
     .attr("transform", function(d) { return "translate(" + x0(d.State) + ",0)"; }) 
 
    .selectAll("rect") 
 
    .data(function(d) { return keys.map(function(key) { return {key: key, value: d[key]}; }); }) 
 
    .enter().append("rect") 
 
     .attr("x", function(d) { return x1(d.key); }) 
 
     .attr("y", function(d) { return y(d.value); }) 
 
     .attr("width", x1.bandwidth()) 
 
     .attr("height", function(d) { return height - y(d.value); }) 
 
     .attr("fill", function(d) { return z(d.key); }); 
 

 
    g.append("g") 
 
     .attr("class", "axis") 
 
     .attr("transform", "translate(0," + height + ")") 
 
     .call(d3.axisBottom(x0)); 
 

 
    g.append("g") 
 
     .attr("class", "axis") 
 
     .call(d3.axisLeft(y).ticks(null, "s")) 
 
    .append("text") 
 
     .attr("x", 2) 
 
     .attr("y", y(y.ticks().pop()) + 0.5) 
 
     .attr("dy", "0.32em") 
 
     .attr("fill", "#000") 
 
     .attr("font-weight", "bold") 
 
     .attr("text-anchor", "start") 
 
     .text("Population"); 
 

 
    var legend = g.append("g") 
 
     .attr("font-family", "sans-serif") 
 
     .attr("font-size", 10) 
 
     .attr("text-anchor", "end") 
 
    .selectAll("g") 
 
    .data(keys.slice().reverse()) 
 
    .enter().append("g") 
 
     .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }); 
 

 
    legend.append("rect") 
 
     .attr("x", width - 19) 
 
     .attr("width", 19) 
 
     .attr("height", 19) 
 
     .attr("fill", z); 
 

 
    legend.append("text") 
 
     .attr("x", width - 24) 
 
     .attr("y", 9.5) 
 
     .attr("dy", "0.32em") 
 
     .text(function(d) { return d; }); 
 

 
</script>

來源

2017-04-27 05:05:49 Mark

+0

非常感謝@Mark ...這兩個例子的解決方案都非常好。 – Shri

相關問題

 相關問題