View pie chart in D3 by reading text file in aax

You can save $data=$_POST["item"].", ".$_POST["tanka"]."", ".$_POST["zaiko"]." "n"; in text.
I don't know two things when I make a pie chart of this stock.
1. How do you drop the desired data in the text file into the parameters of the pie chart.
2. I can't set the center of the pie chart well.

<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8">
<title> Practice Questions</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>

<body>
<h1>Graph the number of items</h1>
<divid="myGraph"></div>
</body>
</html>

<script src="jquery-1.11.2.min.js">/script>
<script type="text/javascript">
$(function(){
     $.ajax({
        url: "list 150520.txt",
        cache: false,
        success:function(data){
        a = data.split(" "n"); // a[0] = (Example) Apple, 100, 20
        a.pop();                　　　　　　
        $.each(a, function(key,value){
            b = value.split(", "); // Inventory is b[2]
            b.pop();
            var item=[b[0]]; // I want to say apple, tangerine, strawberry...
            var list = [b[2]]; // 100, 40, 50 ...

            varsvgWidth = 320;
            varsvgHeight=240;

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

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

            vararc=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>

javascript svg

2022-09-30 19:32

1 Answers

It's done.
As I wrote in the comment, the reason is that the data creation was not good and the designation method for D3 was not good.I think I should use this as the base.

I don't know the format of the data, so I gave it to you in my imagination.Please also change this accordingly.

$(function(){

    acquisition with a = getData(); // $.ajax() is performed pseudoraphorically
    a.splice(0,1); // Delete leading data (header)

    variable = Array();
    var list = Array();

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

    varsvgWidth = 320;
    varsvgHeight=240;

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

    varg = 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 [
        'Product name, unit price, inventory',
        'Apple, 100, 60',
        "Tangerine, 200, 40",
        "Strawberry, 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>

<divid="myGraph"></div>

2022-09-30 19:32

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656