13

D3 を使用して、フローティング ラベル付きの円グラフを作成しようとしています。私はD3が初めてで、これが可能かどうかさえわかりませんか? あるグラフのラベルを別のグラフで使用できますか? もしよろしければ、例を挙げていただけませんか?

短い説明: ラベルが欲しい: http://bl.ocks.org/1691430

ここに画像の説明を入力 ...円グラフになります。

以下は私が実行していたコードです: または JSBIN: http://jsbin.com/awilak/1/edit

彼のコードを正しく理解していれば、これはラベルを追加するセクションです。labelForce.update の機能がわかりません。そこからは遷移は気にしないので、その線はいらないです。残りは円を描いてリンク/ラインを追加するだけですか?誰かがそれを統合できれば素晴らしいですが、何が起こっているのか、何が欠けているのかを理解するのを手伝ってくれれば、私はとても感謝しています.

// Now for the labels
// This is the only function call needed, the rest is just drawing the labels
anchors.call(labelForce.update)

labels = svg.selectAll(".labels")
    .data(data, function(d,i) {return i;})
labels.exit()
    .attr("class","exit")
    .transition()
    .delay(0)
    .duration(500)
    .style("opacity",0)
    .remove();

// Draw the labelbox, caption and the link
newLabels = labels.enter().append("g").attr("class","labels")

newLabelBox = newLabels.append("g").attr("class","labelbox")
newLabelBox.append("circle").attr("r",11)
newLabelBox.append("text").attr("class","labeltext").attr("y",6)
newLabels.append("line").attr("class","link")

labelBox = svg.selectAll(".labels").selectAll(".labelbox")
links = svg.selectAll(".link")
labelBox.selectAll("text").text(function(d) { return d.num})
}

<!DOCTYPE html>
<html>
<head>    
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Testing Pie Chart</title>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.1.3"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js?2.1.3"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?2.1.3"></script>

    <style type="text/css">
    .slice text {
        font-size: 16pt;
        font-family: Arial;
    }   
    </style>
</head>
<body>
    <button id="button"> Test </button>
    <br>
    <form id="controls">
        <div>
            <h2>Y axis</h2>
            <ul id="y-axis">
                <li><label><input checked="checked" type="radio" name="y-axis" value="Component">Component</label></li>
                <li><label><input type="radio" name="y-axis" value="Browser">Browser</label></li>
                <li><label><input type="radio" name="y-axis" value="Version">Version</label></li>
            </ul>
        </div>
    </form>
    <script type="text/javascript">
    // return a list of types which are currently selected
    function plottableTypes () {
        var types = [].map.call (document.querySelectorAll ("#coaster-types input:checked"), function (checkbox) { return checkbox.value;} );
        return types;
     }


    var w = 600,                        //width
    h = 600,                            //height
    r = 100,
    r2 = 200,                           //radius
    axis = getAxis (),                  //axes
    color = d3.scale.category20c();     //builtin range of colors

    data = [
        {"Browser":"Internet Explorer ","Version":"8.0","Toatl":2000,"Component":"6077447412293130422"},
        {"Browser":"Internet Explorer ","Version":"9.0 ","Toatl":1852,"Component":"6077447412293130422"},
        {"Browser":"Internet Explorer ","Version":"6.0 ","Toatl":1754,"Component":"6077447412293130422"},
        {"Browser":"Firefox ","Version":"16.0 ","Toatl":1020,"Component":"6077447412293130422"},
        {"Browser":"Chrome ","Version":"23.0 ","Toatl":972,"Component":"6077447412293130422"},
        {"Browser":"Internet Explorer ","Version":"7.0 ","Toatl":700,"Component":"6077447412293130422"},
        {"Browser":"Mobile Safari ","Version":"6.0 ","Toatl":632,"Component":"6077447412293130422"},
        {"Browser":"BOT ","Version":"BOT ","Toatl":356,"Component":"6077447412293130422"},
        {"Browser":"Firefox ","Version":"8.0 ","Toatl":196,"Component":"6077447412293130422"},
        {"Browser":"Mobile Safari ","Version":"5.1 ","Toatl":184,"Component":"6077447412293130422"}
    ];

    var vis = d3.select("body")
        .append("svg:svg")              //create the SVG element inside the <body>
        .data([data])                   //associate our data with the document
        .attr("width", w)           //set the width and height of our visualization (these will be attributes of the <svg> tag
        .attr("height", h)
        .append("svg:g")                //make a group to hold our pie chart
        .attr("transform", "translate(" + r2 + "," + r2 + ")")    //move the center of the pie chart from 0, 0 to radius, radius

    var arc = d3.svg.arc()              //this will create <path> elements for us using arc data
        .outerRadius(r);


    var pie = d3.layout.pie()           //this will create arc data for us given a list of values
        .value(function(d) { return d.Toatl; });    //we must tell it out to access the value of each element in our data array

    var arcs = vis.selectAll("g.slice")     //this selects all <g> elements with class slice (there aren't any yet)
        .data(pie)                          //associate the generated pie data (an array of arcs, each having startAngle, endAngle and value properties) 
        .enter()                            //this will create <g> elements for every "extra" data element that should be associated with a selection. The result is creating a <g> for every object in the data array
        .append("svg:g")                //create a group to hold each slice (we will have a <path> and a <text> element associated with each slice)
        .attr("class", "slice");    //allow us to style things in the slices (like text)


    arcs.append("svg:path")
        .attr("fill", function(d, i) { return color(i); } ) //set the color for each slice to be chosen from the color function defined above
        .attr("d", arc);                                    //this creates the actual SVG path using the associated data (pie) with the arc drawing function


    arcs.append("svg:text")                                     //add a label to each slice
        .attr("transform", function(d) {                    //set the label's origin to the center of the arc
            //we have to make sure to set these before calling arc.centroid
            d.innerRadius = r2;
            d.outerRadius = r;
            return "translate(" + arc.centroid(d) + ")";        //this gives us a pair of coordinates like [50, 50]
        })
        .attr("text-anchor", "middle")                          //center the text on it's origin
        .text(function(d, i) { 
            if(axis.yAxis == "Component"){
                return data[i].Component;
            }
            return data[i].Browser;     //get the label from our original data array
        });       

        d3.select('#button').on('click', reColor);

        var arcOver = d3.svg.arc()
            .outerRadius(r + 30) 
            .innerRadius(0);
        var arc = d3.svg.arc()
            .outerRadius(r)
            .innerRadius(0); 

        var arcs = vis.selectAll("g.slice")
            .attr("class", "slice")
            .on("mouseover", function(d) {
                getAxis();
                d3.select(this)
                    .select("path")
                    .transition()
                    .duration(500)
                .attr("d", arcOver);
                d3.select(this).select("text")
                    .text(function(d, i) { 
                        if(axis.yAxis == "Component"){
                            return data[i].Component;
                        }
                    return data[i].Browser;     //get the label from our original data array
                });       
            })
            .on("mouseout", function(d) {
                getAxis();
                d3.select(this)
                    .select("path")
                    .transition()
                    .duration(500)
                    .attr("d", arc);
                d3.select(this)
                    .select("text")
                    .text(function(d, i) { 
                        if(axis.yAxis == "Component"){
                            return data[i].Component;
                        }
                        return data[i].Browser;     //get the label from our original data array
                    }); 
                });


        function reColor(){
            var slices = d3.select('body').selectAll('path');
            slices.transition()
                .duration(2000)
                .attr("fill", function(d, i) { return color(i+2); } );
            slices.transition()
                .delay(2000)
                .duration(2000)
                .attr("fill", function(d, i) { return color(i+10); } )
        }
        function makeData(){

        }
        // return an object containing the currently selected axis choices
        function getAxis () {
            var y = document.querySelector("#y-axis input:checked").value;
            return {
                yAxis: y,
            };
        }
        function update() {
            axis = getAxis()
            arcs.selectAll("text")          //add a label to each slice              
                .text(function(d, i) { 
                    if(axis.yAxis == "Component"){
                        return data[i].Component;
                    }
                    return data[i].Browser;     //get the label from our original data array
                });
            }

        document.getElementById("controls").addEventListener ("click", update, false);
        document.getElementById("controls").addEventListener ("keyup", update, false);
    </script>
</body>
</html>
4

3 に答える 3

3

あなたの紹介記事へのコメントで他の人が述べたように、あなたが説明したような解決策を達成することは可能であり、あなたのコードと「moving-labels」の例の一部を使用することは可能です。私があなたを正しく理解していれば、force-layout を使用して重複しないラベルを実現したいと考えているでしょう。

例から貼り付けたコード部分は、すでに正しく説明したように、ラベルと線を描画するだけです。次のステップは、円グラフの周りに力のようなレイアウトでラベルを再配置することです。

例でラベル (およびリンク) を再配置する部分は次のとおりです。

function redrawLabels() {
    labelBox
        .attr("transform",function(d) { return "translate("+d.labelPos.x+" "+d.labelPos.y+")"})

    links
        .attr("x1",function(d) { return d.anchorPos.x})
        .attr("y1",function(d) { return d.anchorPos.y})
        .attr("x2",function(d) { return d.labelPos.x})
        .attr("y2",function(d) { return d.labelPos.y})
}        

// Initialize the label-forces
labelForce = d3.force_labels()
    .linkDistance(0.0)
    .gravity(0)
    .nodes([]).links([])
    .charge(-60)
    .on("tick",redrawLabels)

関数は、ラベルと線の位置を変更するものです。力は D3 によって計算され、 で始まりd3.force_labels()...ます。ご覧のとおり、関数は tick イベントのイベント ハンドラーとして割り当てられます。つまり、力を計算するすべてのステップの後、D3 はすべてのラベルの「引き出し」を呼び出し、位置を更新します。

force_labels()残念ながら、私は D3の方法にあまり詳しくありませんが、通常の とほとんど同じように機能すると思いforce()ます。あなたの場合、アンカーは各ラベルの各パイピースのどこかに配置されます。各パイピース (パイ自体ではなく) の中心にあるほど、より良い結果が得られます。残念ながら、このアンカー位置を何らかの方法で計算し (sin と cos のもの)、ラインエンドを 内のこの固定位置に設定する必要がありますredrawLabels()

これを実行すると、最初の結果が表示されます。良い結果を得るには、重力、リンク距離などの力の値をいじる必要があるかもしれません。(これが、例の silders が行うことです。)

詳細については、d3 ドキュメントを参照してください: https://github.com/mbostock/d3/wiki/Force-Layout

次に、ラベルが重なり合うことなくパイの周りに並べられているという問題に遭遇するかもしれませんが、奇妙な順序になっています。問題の原因であるパネルの周りにラベルをランダムに配置するのではなく、最初にパイの周りの大きな円に正しい順序でラベルを配置することで、これを解決できます。こうすることで、ジッターや位置ずれが少なくなります。

このアイデアは、別のブロックの例でも説明されています: http://bl.ocks.org/mbostock/7881887

この例では、ノードは最初に仮想円上に配置されます。位置は、次の関数によって計算されます。

x: Math.cos(i / m * 2 * Math.PI) * 200 + 幅 / 2 + Math.random(),

y: Math.sin(i / m * 2 * Math.PI) * 200 + 高さ / 2 + Math.random()

それらは半径 200 の円を表し、描画パネルの中心に配置されます。円は m 個の均等な大きさのピースに分割されます。i/m は、i が 0 から m-1 の範囲の「ピース位置」を計算するだけです。

私が助けてくれることを願っています!

于 2014-09-13T00:30:56.770 に答える
0

はい、確かに力ラベルを円グラフと組み合わせることができます! 最初に使用した円グラフ ラベルについて特に特別なことは何もありません。変換または x/y を使用して他のものと同じように配置できる単なるテキスト要素です。最初は、ラベルを付けていたアークの重心に従ってこれらのラベルを配置していたように見えますが、別の基準 (フォース レイアウトの出力など) を同じように簡単に使用できます。

D3 のフォース レイアウトは、何が固定され、何が可動で、どれがどれに接続されているかに関する一連の制約に基づいて、物の位置を計算します。Mike の block.locks の例のlabelForce.updateメソッドを使用して、配置する必要があるオブジェクトの数と、固定された「アンカー」ポイントの場所をフォース レイアウトに通知します。次に、計算されたラベルの位置を図のデータ モデルに保存し、後でredrawLabels関数で使用します。

于 2014-03-24T08:31:57.200 に答える