1

テキストに$data=$_POST["item"].",".$_POST["tanka"].",".$_POST["zaiko"]."¥n";と保存できるようにしました。
この在庫の円グラフを作る際に2点わかりません。
1.円グラフのパラメーターにテキストファイルの目的のデータをどうおとすか。
2.円グラフの中心がうまく設定できません。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>練習問題</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>

<body>
<h1>商品の数をグラフにしてみる</h1>
<div id="myGraph"></div>
</body>
</html>

<script src="jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(function(){
     $.ajax({
        url:"list150520.txt",
        cache:false,
        success:function(data){
        a=data.split("¥n");             //a[0]=(例)りんご、100、20
        a.pop();                      
        $.each(a,function(key,value){
            b=value.split(",");         //在庫はb[2]
            b.pop();
            var item=[b[0]];              //りんご、みかん、いちご・・・としたい
            var list=[b[2]];               //100、40、50・・・としたい

            var svgWidth=320;
            var svgHeight=240;

            var svg=d3.select("#myGraph").append("svg")
                    .attr("width",svgWidth).attr("height",svgHeight)

            var pie=d3.layout.pie()
                    .value(function(d){return d;})

            var arc=d3.svg.arc().innerRadius(0).outerRadius(100);

            svg.selectAll("path")
                .data(pie(list))
                .enter()
                .append("path")
                .attr("d",arc)
                .attr("stroke","white")
                .attr("fill",function(d,i){
                        return color(i);
                })
              .attr("transform","translate("+svgWidth/2+","+svgHeight/2+")")
        });
    }
  });
});

</script>

<style type="text/css">
svg{    border:1px solid black;}
h1{     font-size:1.25em;
        font-weight:bold;}
p{
        margin:0;
        padding:0;
        width:320px;
        border:1px dotted gray;}
</style> 
5
  • 円グラフの中心が上手く設定できないとのことですが、そもそも円グラフは表示されていますか?このロジックでは表示されないと思うのですが・・・
    – kotatsu
    2015年6月1日 3:57
  • 当方 X=0 ,y=0を中心に円グラフは表示されておりますが 根本的に考え方が異なるということでしょうか。
    – sheyma H
    2015年6月2日 13:27
  • 失礼しました。円グラフが表示されるのはvar listに具体的な数値を代入したときです。なのでここに数値をおとしこめれは表示できると思ったのですがこのロジックでは否ということならば最初から考えてみます。
    – sheyma H
    2015年6月2日 13:57
  • このロジックではeachで各行のデータに対してアクセスしているため、var listには一つしかデータが入りません。データをリストに落とす処理の後で円グラフの表示をするように修正が必要だと思います。
    – kotatsu
    2015年6月3日 1:22
  • 確かに一つしかでなくてこまってました。
    – sheyma H
    2015年6月4日 14:42

1 件の回答 1

1

できました。
コメントに書いた通り、データの作り方が良くなかったことと、D3への指定方法が良くなかったことが原因です。あとはこれをベースにすれば良さそうです。

データの形式が不明なので想像で付与しています。こちらも適宜変えてください。

$(function(){

    a = getData(); // $.ajax()での取得を擬似的に行っている
    a.splice(0, 1); // 先頭データ(ヘッダ)を削除

    var item = Array();
    var list = Array();

    $.each(a,function(key,value){
        b=value.split(",");
        item.push(b[0]);
        list.push(b[2]);
    });

    var svgWidth = 320;
    var svgHeight = 240;

    var svg=d3.select("#myGraph").append("svg").attr("width",svgWidth).attr("height",svgHeight)
    var pie=d3.layout.pie().value(function(d){return d;})
    var arc=d3.svg.arc().innerRadius(0).outerRadius(100);

    var g = svg.selectAll(".arc")
        .data(pie(list))
        .enter()
        .append("g")
        .attr("transform","translate("+svgWidth/2+","+svgHeight/2+")")
        .attr("class", "arc");

    g.append("path")
        .attr("d",arc)
        .attr("stroke","white")
        .attr("fill",function(d,i){
                return color(i);
        });
});

function getData(){
    return [
        '品名,単価,在庫',
        'りんご,100,60',
        'みかん,200,40',
        'いちご,400,20'
    ]
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

<div id="myGraph"></div>

1
  • ありがとうございました! pushをつかうのですね。 わかりにくい質問を読み取っていただきましてありがとうございました。
    – sheyma H
    2015年6月4日 14:41

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。