2

私はd3とjsonを初めて使用します。水平ガントチャートを作成しようとしています。以前、varデータセットに保存したインライン配列を使用して同じことを実現しました。しかし今、私は配列をjsonオブジェクト配列に置き換えました。

[   {
        "process" :"process-name 1",
        "stage" : "stage name 1",
        "activities": [
            {
            "activity_name": "waiting",
            "start": new Date('2012-12-10T06:45+05:30'),
            "end": new Date('2012-10-10T08:45+05:30'),
            },
            {
            "activity_name": "processing",
            "start": new Date('2012-10-11T05:45+05:30'),
            "end": new Date('2012-10-11T06:45+05:30'),
            },
            {
            "activity_name": "pending",
            "start": new Date('2012-10-12T11:45+05:30'),
            "end": new Date('2012-10-13T12:45+05:30'),
            }
            ]

    },
    {
        "process" :"process-name 2",
        "stage" : "stage name 2",
        "activities": [
            {
            "activity_name": "waiting",
            "start": new Date('2012-10-22T06:45+05:30'),
            "end": new Date('2012-10-23T08:45+05:30'),
            },
            {
            "activity_name": "processing",
            "start": new Date('2012-10-25T05:45+05:30'),
            "end": new Date('2012-10-25T06:45+05:30'),
            },
            {
            "activity_name": "pending",
            "start": new Date('2012-10-27T11:45+05:30'),
            "end": new Date('2012-10-27T12:45+05:30'),
            }
            ]
    }       

    ];

長方形を描画するコードのd3部分は次のとおりです。

console.log(dataset);

var height = 600;
var width = 500;
var x = d3.time.scale().domain([new Date(2011, 0, 1,23,33,00), new Date(2013, 0, 1, 23, 59)]).range([0, width]);



var svg = d3.selectAll("body")
.append("svg")
.attr("width",width)
.attr("height",height)
.attr("shape-rendering","crispEdges");


temp = svg.selectAll("body")
.data(dataset) // LINE 1 
.enter()


temp.append("rect")
.attr("width", 4)
.attr("height",12)
.attr("x", function(d) {return x(d.activities[0].start)}) // LINE 2
.attr("y",function(d,i){return i*10;})
.attr("fill","steelblue");

次の質問があります：

  1. アクティビティ内の開始日にアクセスしたいのですが、コード行（LINE1およびLINE2とマークされています）を使用して、各アクティビティの最初の開始に2つの長方形のみを指定していると記述しました。なぜ？

  2. LINE 1では、データセットだけでなく、dataset.actitviesを使用できますか？私はそれを使ってみました、私にこのエラーを与えました：

Uncaught TypeError：未定義のプロパティ「0」を読み取ることができません

4

1 に答える 1

3

  1. データセットの長さは 2 であるため、四角形と結合すると、2 つの四角形しか得られません。

  2. dataset.activities を使用できますが、LINE 2 を次のように変更します。

    .attr("x", function(d) {return x(d.start)})

d がアクティビティを参照するように結合を変更したためです。ただし、これを行うと、プロジェクトの 1 つのアクティビティである 3 つの四角形が得られるだけです。

ネストされたデータを使用する場合は、ネストされた選択を使用するか、最初にすべてのアクティビティを単純な配列に追加してデータを平坦化する必要があります。

var data = [];

for (var i = 0, len = dataset.length; i < len; i++) {
    data = data.concat(dataset[i].activities);
}

ネストされた選択は次のようになります。

projects = svg.selectAll("g")
    .data(dataset)
  .enter().append("g")
    .attr("transform", function (d, i) { return "translate(0," + (i * 10) + ")"; }),

rects = projects.selectAll("rect")
    .data(function (d) { return d.activities; })
  .enter().append("rect")
    .attr("height", 12)
    .attr("width", 4)
    .attr("x", function (d) { return x(d.start); })

編集：これはjsfiddleです

于 2013-02-20T02:26:08.137 に答える