

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

[code]

    <!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> 
    
[/code]


CC BY-SA 3.0
2015-05-29T12:58:41.137
10767
2015-08-02T05:59:15.660
9422
question
javascript svg
D3で円グラフをajaxでテキストファイルをよみこんで表示


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

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

[code]

    $(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'
        ]
    }
[/code]

[code]

    <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>
[/code]


CC BY-SA 3.0
2015-06-03T01:55:42.663
10923
2015-06-03T01:55:42.663
7214
10767
answer