2

いくつかの csv データから積み上げ棒グラフを作成しようとしています。Scott Murray のチュートリアルhttp://alignedleft.com/tutorials/d3/ (余談ですが、これは私が遭遇した d3.js に関する最高のチュートリアルであり、実際には d3 wiki にリンクする必要があります) を読んだ後、Andrew も同様です。 Davis のチュートリアル 必要な四角形を作成するために、次の試用コードをハッシュ化しました。

window.onload = function()
{
var LikertData = [{a:0,b:1},{a:0,b:1},{a:0,b:1},{a:0,b:1},];
var w = 200;
var h = 200;

var svg = d3.select("body").append("svg")
        .attr("width", w)
        .attr("height", h);

var myG  = svg.selectAll("g")
        .data(LikertData)
        .enter()
        .append("g")
        .text(function(d)
        {
        var myRect = d3.selectAll("rect")
        .data(d.entries)
        .enter()
        .append("rect");
        return myRect;
            });
}

LikertData 配列を形成する配列ごとに、rect が親の g 要素に追加されるという考え方です。しかし、うまくいきません。私は少し暖かくなっていますか？

編集:これは私が望むものに近いです-私を困惑させている.dataと、データに使用したいものを示しました:

window.onload = function()
{
    d3.csv("likert.csv", function(LikertData){
        var svg = d3.select("body").append("svg")

        var myG  = svg.selectAll("g")
            .data(LikertData)
            .enter()
            .append("g")
            .selectAll("rect")
            .data()//<--I want data to use an array of key values for the parent g's d
            .enter()
            .append("rect");
    });
}

console.log(d3.entries(LikertData)) を使用すると、次のように複数のオブジェクトが生成されるため、データは関連付けられます。

[
Object
    key: "50"
    value: Object
        Agree: ""
        Always: "39.1%"
        Disagree: ""
        Neutral: ""
        Never: "4.3%"
        Row Labels: "I run out of time in long tasks"
        Sometimes: "52.2%"
        Strongly Agree: ""
        Strongly Disagree: ""
        Unanswered: "4.3%"
        __proto__: Object
    __proto__: Object
]
4

2 に答える 2

1

それほど遠くない。試す

var LikertData = [{a:0,b:1},{a:0,b:1},{a:0,b:1},{a:0,b:1},];
var w = 200; var h = 200; 

var svg = d3.select("body").append("svg")
  .attr("width", w)
  .attr("height", h);

var myG  = svg.selectAll("rect")
  .data(LikertData).enter()
  .append("rect")
  .attr("x", function(d, i) { return i * 50; })
  .attr("y", function(d, i) { return i * 50; })
  .attr("width", 50)
  .attr("height", 50);

および属性は長方形xをy配置し、幅と高さを指定する必要があります。それらを要素でラップしたい場合は、を呼び出す前にg追加するだけです。ただし、ここでは必要ありません。.append("g")data()

このtext関数は、テキストコンテンツを設定するためにのみ使用する必要があります。新しい要素を追加するために使用しないでください。また、ネストされた配列がないため、への呼び出しは1回だけで済みます.data()。

于 2012-08-21T14:53:34.950 に答える
1

最終的なコードを簡素化 - csv の解析方法を変更して parseRows 関数を使用すると、配列の配列が作成され、外側の d を .data のソースとして使用できるようになりました。

window.onload = function()
{   
    d3.text("likert.csv", function(LikertData){
        var parsedData = d3.csv.parseRows(LikertData);

        var svg = d3.select("body")
        .append("svg");

        var g = svg.selectAll("g")
        .data(parsedData)
        .enter()
        .append("g");

        var gRect = g.selectAll("rect")
            .data(function(d){return d})
            .enter()
            .append("rect");

    });
}
于 2012-08-22T10:59:49.710 に答える