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/。有人可以指出我正确的方向并让我知道我的方法有什么问题吗？谢谢。更新：使用稍微不同的方法创建了另一个小提琴。仍然无法正常工作:-( 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 回答