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