1

複数の円グラフを作成するマイク・ボストックの例のコードを適応させようとしています。非常に簡潔ですが、コードの基本的な部分を理解するのに苦労しています。

// Define the data as a two-dimensional array of numbers. If you had other
// data to associate with each number, replace each number with an object, e.g.,
// `{key: "value"}`.
var data = [
  [11975,  5871, 8916, 2868],
  [ 1951, 10048, 2060, 6171],
  [ 8010, 16145, 8090, 8045],
  [ 1013,   990,  940, 6907]
];

これを機能させる例は何{key: "value"}ですか? 私はもう試した

[{key1: 100}, {key2: 200}]

[{key1: 100, key2: 200}]

[{'key1': 100, 'key2': 200}] および他のいくつかの順列。

私の目標は、jsonこのようなデータ構造の代わりにオブジェクトを使用することですが、正しいデータ構造を構築する方法をよりよく理解したいと思っています。

(gist 経由で) チャートを生成するには、次のコードを使用します。

var m = 10,
    r = 100,
    z = d3.scale.category20c();

var svg = d3.select(".sentiment-pie-chart-1").selectAll("svg")
    .data(data)
  .enter().append("svg:svg")
    .attr("width", (r + m) * 2)
    .attr("height", (r + m) * 2)
  .append("svg:g")
    .attr("transform", "translate(" + (r + m) + "," + (r + m) + ")");

svg.selectAll("path")
    .data(d3.layout.pie())
  .enter().append("svg:path")
    .attr("d", d3.svg.arc()
    .innerRadius(r / 2)
    .outerRadius(r))
    .style("fill", function(d, i) { return z(i); });
4

2 に答える 2

2

円グラフ レイアウトがこの構造から値を抽出する方法も置き換える限り、任意の構造 (リストしたものを含む) を使用できます。これは、おそらく一貫したキー名が必要であることを意味します。たとえば、データ構造の場合

[{key1: 100}, {key1: 200}]

.value()関数を使用して、次のように円グラフのレイアウトを定義する必要があります。これがあなたの質問だと思います。

svg.selectAll("path")
   .data(d3.layout.pie().value(function(d) { return d.key1; })
// etc

これは、各配列の各要素を取得し (ここではオブジェクトの 2 つのネストされた配列があることに注意してください) .key1、円グラフの分数を計算するメンバーを取得します。

于 2013-10-15T18:49:17.597 に答える
1 
<html>
<head>
    <title>
        Pie chart
    </title>
<script type="text/javascript" src='d3.v3.min.js' charset='utf-8' ></script>
</head>
    <body>
        <script type="text/javascript">

            var data = [
                [11975,  5871, 8916, 2868],
                [ 1951, 10048, 2060, 6171],
                [ 8010, 16145, 8090, 8045],
                [ 1013,   990,  940, 6907]
            ];

            //For the data above you can convert each data row in array of object.
            //like,

            var newData = data[0].map(function(val){
                return {value : val} ;
            });

            //here you will get  : 

            // var newData = [
            //     {value : 11975} ,
            //     {value : 5871} ,
            //     {value : 8916} ,
            //     {value : 2868} ];

            // You can do same thing for each data row  .

            var width = 1100 , height = 650 , radius = 250 ,
            color = ["#C5AAF5","#FB7374","#A3CBF1","#79BFA1","#F5A352","#94B3C8", "#F9D08B","#B2AC4E","#64BD4F","#C09372"];

            var colorDescriptions = [];

            var svgContainer = d3.select("body") // create svg container
                .append("svg:svg")
                .data([newData])
                .attr("width", width)
                .attr("height", height)
                .append("svg:g")
                .attr("transform", "translate(" + 300 + "," + 300 + ")") ;;

            // Create new svg containier for each element && transform it to diff point.
            var arc = d3.svg.arc() // draw arc of given radius
                .outerRadius(radius);

            var pie = d3.layout.pie() // assign data for pie chart
                .value(function(d) { return d.value; });

            var arcs = svgContainer.selectAll("g.slice") // slice the circle
                .data(pie)   
                .enter()
                .append("svg:g")
                .attr("class", "slice");

            arcs.append("svg:path") // fill color in each slice
                .attr("fill", function(d, i) { return color[i]; } )
                .attr("d", arc)

            arcs.append("svg:text") // write slice information values
                .attr("transform", function(d) {
                d.innerRadius = 0;
                d.outerRadius = radius;
                    return "translate(" + arc.centroid(d) + ")";
                })
                .attr("text-anchor", "middle")
                .text(function(d, i) { return newData[i].value; })
                .style("font-family","monospace")
                .style("fill", "#3f3f3f")
                .style("font-size", "20px");

            var description = svgContainer.append("g").attr("class", "description"); // pie chart description
            var desc_label = description.append("text")
                .attr("class", "description")
                .attr("y", 300)
                .attr("x", 000)
                .text("Pie Chart")
                .style("font-weight", "bold")
                .style("font-size", "20px")
                .style("text-anchor", "middle"); 
        </script>
    </body>
</html>
于 2014-11-14T08:43:11.833 に答える