2

D3.js を使用してツールチップ付きの面グラフを作成しようとしています。http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.htmlのようなことをしようとしてい ます。面グラフを正常に作成できますが、散布図コードを混ぜようとすると、何も機能しないようです。以下は私のコードです

var m = [40,40,40,70],
w = 500 -m[1] - m[3],
h = 300 - m[0] - m[2];

var svg = d3.select('body').append('svg')
.attr('width', w+m[1]+m[3])
.attr('height', h+m[0]+m[2])
.append("g")
.attr("transform", "translate(" + m[3] + "," + m[0] + ")");

var div = d3.select("body").append("div")   
.attr("class", "tooltip")               
.style("opacity", 0);

var data = [{
'Wed Jan 23 00:00:00 IST 2013': 3383387
}, {
'Thu Jan 24 00:00:00 IST 2013': 3883387
}, {
'Fri Jan 25 00:00:00 IST 2013': 4383387
}, {
'Sat Jan 26 00:00:00 IST 2013': 2383387
}, {
'Sun Jan 27 00:00:00 IST 2013': 5383387
}, {
'Mon Jan 28 00:00:00 IST 2013': 2283387
}];

var format = d3.time.format("%a %b %d %H:%M:%S IST %Y");

var xscale = d3.time.scale().domain([format.parse(d3.keys(data[0])[0]), format.parse(d3.keys(data[5])[0])]).range([0, w]),
yscale = d3.scale.linear().domain([0, d3.max(data, function (d) {
    return d3.values(d)[0];
})]).range([h, 0]);

var xAxis = d3.svg.axis()
.scale(xscale)
.ticks(d3.time.days, 2)
.orient("bottom");

var yAxis = d3.svg.axis()
.scale(yscale)
.ticks(4)
.orient("left");

var area = d3.svg.area()
.x(function(d) { return xscale(format.parse(d3.keys(d)[0])); })
.y0(h)
.y1(function(d) { return yscale(d3.values(d)[0]); })
.interpolate("basis");

svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + h + ")")
.call(xAxis.tickSubdivide(1).tickSize(6));

svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "translate(" + w + ",0)");

svg.append("g")
.append('path')
.attr("class", "area")
.call(area);

svg.selectAll('g.generator')
.data([data])
.enter().append("svg:circle")
.attr("cx",function(d){ return xscale(format.parse(d3.keys(d)[0]));})
.attr("cy", function(d){ return yscale(d3.values(d)[0]);})
.attr("r", function(d){ return 4;});

jsfiddle も作成しました: http://jsfiddle.net/DTs7F/。誰かが私を正しい方向に向けて、私のアプローチの何が問題なのか教えてもらえますか? ありがとう。更新: わずかに異なるアプローチを使用して、もう 1 つのフィドルを作成しました。まだ動作していません:-( http://jsfiddle.net/DTs7F/3/

4

1 に答える 1

2

散布図について：

データの配列ラッパーを削除します (既に配列になっています)。

への変更

svg.selectAll('g.generator')
  .data( data )  // formerly .data([data])

エリアチャートについて：

以下のように、エリアを「呼び出す」のではなく、エリアのパス データを取得します。

svg.append("g").append("path")
  .datum(data)
  .attr("class", "area")
  .attr("d", area);

それ以外の

// Not right
svg.append("g")
   .append('path')
   .attr("class", "area")
   .call(area);
于 2013-02-01T19:10:41.830 に答える