Y轴显示24小时范围,X轴显示数据(视为类别)
下面的代码将有助于生成Y轴和svg创建。
var y = d3.time.scale().domain([new Date("2015-09-01 00:00:00"),new Date("2015-09-01 23:59:59") ]).range([height + margin.top, 0 + margin.top]).clamp(true);
var yAxis = d3.svg.axis().scale(y).orient("left").ticks(
24).tickFormat(d3.time.format("%H:%M"))
.tickSubdivide(true);
// draw the boxplots
svg.selectAll(".box")
.data(boxPlotData)
.enter().append("g").attr("class",function(d) { return 'rowno'+d[2]; })
.attr("transform", function(d) { return "translate(" + x(d[0]) + "," + margin.top + ")"; } )
.call(chart.width(x.rangeBand()));
svg.selectAll('rect.box').data(boxPlotData).call(make_editable,"title");
"chart.width(x.rangeBand())" method is trying to generate box plot
图表方法内的代码
var today = new Date();
var x1 = d3.time.scale()
.domain(domain && domain.call(this, d, i) || [new Date(min), new Date(max)]).range([height, 0]);
this.__chart__ = x1;
var center = g.selectAll("line.center")
.data(data);
//vertical line
center.enter().insert("line", "rect")
.attr("class", "center")
.attr("x1", width / 2)
.attr("y1", function(d) { return x1(d[0]); })
.attr("x2", width / 2)
.attr("y2", function(d) { return x1(d[1]); })
.style("opacity", 1)
.transition()
.duration(duration)
.style("opacity", 1)
.attr("y1", function(d) { return (x1(d[0])); })
.attr("y2", function(d) { return x1(d[1]); });
这是代码可能会生成胡须线,但它没有生成
先谢谢