我如何外部化我的數據

我是d3.js和Javascript的新手，目前正嘗試使用d3構建圖形。我的數據目前被放置在一個dataArray var中，但我想將其外部化。每次我嘗試使用其他文件或不同的數據格式，它都不起作用。這裏是我的代碼：我如何外部化我的數據

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta> 
 
    <meta http-equiv="refresh" content=""> 
 
    <meta name="description" content="Drawing Shapes w/ D3 - " /> 
 
    <meta charset="utf-8"> 
 
    <title>Resources per Project</title> 
 
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
 

 
    <style type="text/css"> 
 
    h1 { 
 
     font-size: 35px; 
 
     color: darkgrey; 
 
     font-family: Helvetica; 
 
     border-bottom-width: 3px; 
 
     border-bottom-style: dashed; 
 
     border-bottom-color: black; 
 
    } 
 
    h2 { 
 
     font-size: 20px; 
 
     color: black; 
 
     font-family: Helvetica; 
 
     text-decoration: underline; 
 
     margin-left: 290px; 
 
     margin-top: 0px; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <h1>Resources used per Project</h1> 
 
    <script type="text/javascript"> 
 
    var width = 600 
 
    var height = 500 
 
    var emptyVar = 0 
 
    var dataArray = [0.35, 1.66, 3.04, 1.54, 3.45, 2.56, 2.29, 1.37]; 
 
    var emptyData = []; 
 
    var widthScale = d3.scale.linear() 
 
     .domain([0, 5]) 
 
     .range([0, width]); 
 

 
    var color = d3.scale.linear() 
 
     .domain([0, 5]) 
 
     .range(["#000066", "#22abff"]) 
 

 
    var axis = d3.svg.axis() 
 
     .ticks("10") 
 
     .scale(widthScale); 
 

 
    var canvas = d3.select("body") 
 
     .append("svg") 
 
     .attr("width", width) 
 
     .attr("height", height) 
 
     .append("g") 
 
     .attr("transform", "translate(30, 0)"); 
 

 
    var bars = canvas.selectAll("rect") 
 
     .data(dataArray) 
 
     .enter() 
 
     .append("rect") 
 
     .attr("width", emptyVar) 
 
     .attr("height", 50) 
 
     .attr("fill", function(d) { 
 
     return color(d) 
 
     }) 
 
     .attr("y", function(d, i) { 
 
     return i * 55 
 
     }) 
 

 
    canvas.append("g") 
 
     .attr("transform", "translate(0, 430)") 
 
     .attr("font-family", "Helvetica") 
 
     .attr("font-size", "15px") 
 
     .call(axis); 
 

 
    bars.transition() 
 
     .duration(1500) 
 
     .delay(200) 
 
     .attr("width", function(d) { 
 
     return widthScale(d); 
 
     }) 
 
    </script> 
 
    <h2>Resources</h2> 
 
</body> 
 

 
</html>

隨附的是2個文件（一個JSON和一個CSV），其中有我試圖使用這些數據。「資源」下的數據是dataArray中的當前數據。我如何外部化這些數據？

來源

2016-06-26 FateJudgement

這些可能的幫助。 CSV：http://stackoverflow.com/questions/16231266/embedding-csv-in-html-for-use-with-d3-js JSON：http://stackoverflow.com/questions/9320427/best-practice-for -embedding-任意JSON-在最DOM –

如果您想要將外部數據加載到D3中。你有2個選擇：

選項A：一個單個文件（JSON或CSV或TSV）

d3.json("your.json", function (data) { 
    // stuff here 
})

或

d3.csv("your.csv", function (data) { 
    // stuff here 
})

或

d3.tsv("your.tvs", function (data) { 
    // stuff here 
})

選項B：多個文件（JSON，CSV a第二TSV）的

queue() 
    .defer(d3.json, 'json_data.json') 
    .defer(d3.csv, 'csv_data.csv') 
    .defer(d3.tsv, 'tsv_data.tsv') 
    .await(makeGraph); 

function makeGraph (json_data, csv_data, tsv_data, error) { 
    //your stuff here 
}

要使用queue你一定要包括腳本在您的標題：

<script src="http://d3js.org/queue.v1.min.js"></script>

排隊等待所有數據抵達，然後執行功能。

JSON：JavaScript對象符號
CSV：逗號分隔值
TSV：製表符分隔值

那麼你的代碼：

var width = 600 
var height = 500 
var emptyVar = 0 
var dataArray = [0.35, 1.66, 3.04, 1.54, 3.45, 2.56, 2.29, 1.37]; 
var emptyData = []; 
var widthScale = d3.scale.linear() 
    .domain([0, 5]) 
    .range([0, width]); 

var color = d3.scale.linear() 
    .domain([0, 5]) 
    .range(["#000066", "#22abff"]) 

var axis = d3.svg.axis() 
    .ticks("10") 
    .scale(widthScale); 

var canvas = d3.select("body") 
    .append("svg") 
    .attr("width", width) 
    .attr("height", height) 
    .append("g") 
    .attr("transform", "translate(30, 0)"); 

queue() 
    .defer(d3.json, 'json_data.json') 
    .defer(d3.csv, 'csv_data.csv') 
    .await(makeGraph); 

function makeGraph(json_data, csv_data, error) { 
    if (error) { 
     alert ("something went wrong!!"); 
    } 
    var bars = canvas.selectAll("rect") 
     .data(your_data_from_json_or_csv) 
     .enter() 
     .append("rect") 
     .attr("width", emptyVar) 
     .attr("height", 50) 
     .attr("fill", function(d) { 
     return color(d) 
     }) 
     .attr("y", function(d, i) { 
     return i * 55 
     }) 

    canvas.append("g") 
     .attr("transform", "translate(0, 430)") 
     .attr("font-family", "Helvetica") 
     .attr("font-size", "15px") 
     .call(axis); 

    bars.transition() 
     .duration(1500) 
     .delay(200) 
     .attr("width", function(d) { 
     return widthScale(d); 
     }) 
}

來源

2016-06-27 00:47:46 Klaujesi

我如何外部化我的數據

回答

相關問題