Question

我正在尝试在d3.js中创建一个线性图表，其中我希望x轴具有以下格式“27/11 1”，其中27是日期，11是月，1是小时（24小时时间）。但是使用代码我看起来只有一小时打印。有人可以帮我正确地获取格式吗？

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF8">
<body>
<div id="task-submissions-created-at" >
    <div class="reset" style="visibility: hidden;">selected: <span class="filter"></span>
      <a href="javascript:taskSubmissionsChart.filterAll();dc.redrawAll();">reset</a>
    </div>
 <div id="gender-tasks" style="width:300px; height:300px">
    <div class="reset" style="visibility: hidden;">selected: <span class="filter"></span>
      <a href="javascript:genderChart.filterAll();dc.redrawAll();">reset</a>
    </div>


  </div>
<script type="text/javascript" src="../js/d3.js" charset="utf-8"></script>
<script type="text/javascript" src="../js/crossfilter.js"></script>
<script type="text/javascript" src="../js/dc.js"></script>
<script type="text/javascript">
//var genderChart=dc.pieChart('#gender-tasks');
var taskSubmissionsChart=dc.lineChart('#task-submissions-created-at');
var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S.%L+05:30").parse;
d3.json("../data/task_submissions.json",function(error,value){
    var ndx=crossfilter(value);
    value.forEach(function(d) {
    d.created_at = parseDate(d.created_at);
});
    var timestampDimension=ndx.dimension(function(d){
            var x=d.created_at.getHours();
            return x;
    });
    var taskSubmissionId = timestampDimension.group().reduceSum(function(d) {return d.id;});
    var minDate =timestampDimension.bottom(1)[0].created_at.getHours();
    var maxDate = timestampDimension.top(1)[0].created_at.getHours();



    taskSubmissionsChart
    .width(768)
    .height(480)
    //.x(d3.time.scale().domain([d3.min(data,function(d){return d.time}),d3.max(data,function(d){return d.time})]))
    .x(d3.scale.linear().domain([minDate,maxDate+1]))
    .interpolate('step-before')
    .renderArea(true)
    .brushOn(false)
    .clipPadding(10)
    .yAxisLabel("This is the Y Axis!")
    .dimension(timestampDimension)
    .group(taskSubmissionId)
    .xAxis().tickFormat(function(v){
        console.log("v:  "+v);
        return v;
    });

    taskSubmissionsChart.render();
});
/*
d3.json("../data/users.json", function(error,value) {
var ndx=crossfilter(value);
var runDimension  = ndx.dimension(function(d) {
      return d.gender;
    });
var speedSumGroup = runDimension.group();
genderChart
    .width(300)
    .height(300)
    .slicesCap(4)
    .innerRadius(10)
    .dimension(runDimension)
    .group(speedSumGroup)
    .controlsUseVisibility(true);
dc.renderAll();
});
*/

</script>

</body>
</html>

dc.js中的X轴时间格式

0 个答案: