dimple.jsとd3.jsのシンプルなバープロット

私はdimple.jsの非常に基本的な棒グラフに取り組んでいます。ブラウザでレンダリングすると、軸と軸のラベルだけが表示されますが、棒は表示されません。どんな助けもありがたい。私は、ローカルホストを作成するためにPythonを使用しています。dimple.jsとd3.jsのシンプルなバープロット

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <link href="main.css" rel="stylesheet"> 
    <script src="http://d3js.org/d3.v3.min.js"></script> 
    <script src="http://dimplejs.org/dist/dimple.v2.0.0.min.js"></script> 
    </head> 
    <body> 
    <h2> Rise of the Machines: R&D on Unmanned Aerial Aircrafts</h2> 
    <script src="index.js"></script> 
    </body> 
</html>

index.js

function draw(data) { 

     /* 
     D3.js setup code 
     */ 
    var margin = 75; 
    var width = 1400 - margin; 
    var height = 600 - margin; 

     /* Find body tag, append svg, and add chart group tag*/ 
    var svg = d3.select("body") 
     .append("svg") 
     .attr("width", width + margin) 
     .attr("height", height + margin) 
     .append("g") 
     .attr("class","chart"); 

     /* 
     Dimple.js Chart construction code 
     */ 

     var myChart = new dimple.chart(svg, data); 
     x = myChart.addCategoryAxis("x", ""); 
     y = myChart.addMeasureAxis("y", "Share of Global Spending (%)"); 
     myChart.addSeries(null, dimple.plot.bar); 
     myChart.draw(); 
    }; 

d3.csv("data.csv", draw);

出典

2016-06-19 mosquitonomics

cvsヘッダーといくつかの行を投稿できますか？ – Klaujesi

http://stackoverflow.com/help/accepted-answer –

あなたがデータを取得する場所をディンプルして教えてくれないだろう

：

x = myChart.addCategoryAxis("x", "");  //<---- X values 
    y = myChart.addMeasureAxis("y", "Share of Global Spending (%)"); // <--- Y values

例

var data = [ 
    { "Word":"Hello", "Awesomeness":2000 }, 
    { "Word":"World", "Awesomeness":3000 } 
]; 

chart.addCategoryAxis("x", "Word"); 
chart.addMeasureAxis("y", "Awesomeness");

別の例を

var data = [ 
    { "data1":"Hello", "data2":2000 }, 
    { "data1":"World", "data2":3000 } 
]; 

chart.addCategoryAxis("x", "data1"); 
chart.addMeasureAxis("y", "data2");

csvの列名からデータの起点を指す必要があります。

Xdata, Yvalue 
1,10 
2,20 
3,30 
4,20

あなたのコード：あなたのcsvファイルで

chart.addCategoryAxis("x", "Xdata"); 
chart.addMeasureAxis("y", "Yvalue");

出典

2016-06-19 16:45:13 Klaujesi

dimple websiteで、カンマ区切りの値とは対照的に、（タブ区切り値）.TSV使用するための手順を推奨しているようです。ここで

がうまくいけば、site

<html> 
<div id="chartContainer"> 
    <script src="/lib/d3.v3.4.8.js"></script> 
    <script src="http://dimplejs.org/dist/dimple.v2.2.0.min.js"></script> 
    <script type="text/javascript"> 
    var svg = dimple.newSvg("#chartContainer", 590, 400); 
    d3.tsv("/data/example_data.tsv", function (data) { 
     var myChart = new dimple.chart(svg, data); 
     myChart.setBounds(60, 30, 510, 330) 
     myChart.addCategoryAxis("x", ["Price Tier", "Channel"]); 
     myChart.addMeasureAxis("y", "Unit Sales"); 
     myChart.addSeries("Channel", dimple.plot.bar); 
     myChart.addLegend(65, 10, 510, 20, "right"); 
     myChart.draw(); 
    }); 
    </script> 
</div> 
</html>

から採取した試料（垂直）棒グラフのコードでは、これは正しい方向にあなたをご案内します。

出典

2016-06-19 22:07:20

githubにd3（唯一のディンプル）csv棒グラフのリンクがありますが、参照先のリンク（「派生元」として）をたどると再び表示されます、元の.tsvファイルを使用します。リンクはhttps://gist.github.com/d3noob/8952219です。この他のリンクはhttp://blog.decayingcode.com/post/easy-charting-in-javascript-with-d3js-and-dimple-fromです。 -csv-data/helpful –

dimple.jsとd3.jsのシンプルなバープロット

答えて

関連する問題