データを外部化する方法

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つのファイル（1 JSONと1 CSV）です。「resources」の下のデータは、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 - 埋め込み - 任意 - json-in-the-dom –

外部データをD3にロードする場合。

オプション：1つのファイル（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あなたは2のオプションを持っています：複数のファイル（JSON、CSVs NDの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

データを外部化する方法

答えて

関連する問題