在D3中有工具提示的區域圖表

Question

我想用工具提示使用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/。有人能指點我正確的方向，讓我知道我的方法有什麼問題嗎？謝謝。 更新：使用稍微不同的方法創建一個小提琴。仍然沒有工作:-(http://jsfiddle.net/DTs7F/3/

Answer 1

關於散點圖：

在你的數據刪除陣列封裝（這已經是一個數組）

變化

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);