如何在箱形图d3图表的时间范围内获得胡须

时间:2015-11-29 15:52:04

标签: javascript jquery d3.js boxplot

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

这是代码可能会生成胡须线,但它没有生成

先谢谢

0 个答案:

没有答案