创建x轴时，如何强制d3js考虑几个小时? [英] How to force d3js to take hours into account when x axis is created?

问题描述

小提琴: http://jsfiddle.net/8eba8q33/2/

我的x轴是时间标尺

var x = d3.time.scale().range([0, width]);

在x轴上，如果我在json数据中有10个值，我希望能够精确地有10个刻度.我的json数组包含如下对象:

On the x axis i want to be able to have exactly 10 ticks if i have 10 values in my json data. my json Array contains Objects like:

CurrentQuantity: 20
LastUpdated: Thu Jan 15 2015 13:09:30 GMT+0100 (Romance Standard Time)

当我想为x轴创建域时，我尝试这样做:

when i want to create a domain for x axis i trying to do this:

x.domain(d3.extent(data, function(d) {
    return d.LastUpdated; }));

但是由于某种原因，上面的代码没有考虑数小时和数分钟，因此，如果我有多个对象，而LastUpdated相同，但是不同之处在于时数或分钟数，则比例尺将不会显示它，因为绘图结束了在彼此之上.

but for some reason code above dont take hours minutes and seconds into account, so if i have multiple objects where LastUpdated are the same, but the difference is in the hours or minutes, scale will just not show it, because plots end up on top of each other.

我如何强制xAxis考虑数小时，数分钟和数秒?

How do i force xAxis to take hours, minutes and seconds into account?

推荐答案

exp1();

function exp1(){
  
  
  var data = [
     {
        "CurrentQuantity": "50",
        "LastUpdated": "/Date(1420793427983)/"
    },
     {
        "CurrentQuantity": "76",
        "LastUpdated": "/Date(1420721731353)/"
    },
    {
        "CurrentQuantity": "20",
        "LastUpdated": "/Date(1420714881920)/"
    },
      {
        "CurrentQuantity": "24",
        "LastUpdated": "/Date(1420713917820)/"
    }//,
     // {
//        "CurrentQuantity": "25",
 //       "LastUpdated": "/Date(1418907098197)/"
 //   }
    
];

var margin = {top: 20, right: 20, bottom: 85, left: 50},
        width = 1500 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;
    var formatDate = d3.time.format("%Y-%m-%d %H:%M:%S");

    var x = d3.time.scale().range([0, width]);
    x.tickFormat("%Y-%m-%d %I:%M:%S")
    var y = d3.scale.linear().range([height, 0]);

    var xAxis = d3.svg.axis()
        .scale(x)
        .tickFormat(function(d) { 
            return formatDate(d);
        })
        .orient("bottom");

    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left");

    data.forEach(function(d) {
        var date = new Date(parseInt(d.LastUpdated.substr(6)));
        console.log(date)
        d.LastUpdated = date;
    });


    var line = d3.svg.line()
        .x(function(d) {
            return x( d.LastUpdated); 
        })
        .y(function(d) {
            return y(d.CurrentQuantity); 
        });

    var svg = d3.select("#chart1").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

 
    x.domain(d3.extent(data, function(d) {
        return d.LastUpdated; 
    }));
    y.domain(d3.extent(data, function(d) {
        return d.CurrentQuantity; 
    }));

    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis)
      .selectAll("text")  
            .style("text-anchor", "end")
            .attr("dx", "-.8em")
            .attr("dy", ".15em")
            .attr("transform", function(d) {
                return "rotate(-45)" 
            });

    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
      .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .text('@Resource.Amount');

    svg.append("path")
        .datum(data)
        .attr("class", "line")
        .attr("d", line);
  
}








exp2();


function exp2(){
  
  
  var data = [
     {
        "CurrentQuantity": "50",
        "LastUpdated": "/Date(1420793427983)/"
    },
     {
        "CurrentQuantity": "76",
        "LastUpdated": "/Date(1420721731353)/"
    },
    {
        "CurrentQuantity": "20",
        "LastUpdated": "/Date(1420714881920)/"
    },
      {
        "CurrentQuantity": "24",
        "LastUpdated": "/Date(1420713917820)/"
    },
      {
        "CurrentQuantity": "25",
       "LastUpdated": "/Date(1418907098197)/"
    }
    
];

var margin = {top: 20, right: 20, bottom: 85, left: 50},
        width = 1500 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;
    var formatDate = d3.time.format("%Y-%m-%d %H:%M:%S");

    var x = d3.time.scale().range([0, width]);
    x.tickFormat("%Y-%m-%d %I:%M:%S")
    var y = d3.scale.linear().range([height, 0]);

    var xAxis = d3.svg.axis()
        .scale(x)
        .tickFormat(function(d) { 
            return formatDate(d);
        })
        .orient("bottom");

    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left");

    data.forEach(function(d) {
        var date = new Date(parseInt(d.LastUpdated.substr(6)));
        console.log(date)
        d.LastUpdated = date;
    });


    var line = d3.svg.line()
        .x(function(d) {
            return x( d.LastUpdated); 
        })
        .y(function(d) {
            return y(d.CurrentQuantity); 
        });

    var svg = d3.select("#chart2").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

 
    x.domain(d3.extent(data, function(d) {
        return d.LastUpdated; 
    }));
    y.domain(d3.extent(data, function(d) {
        return d.CurrentQuantity; 
    }));

    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis)
      .selectAll("text")  
            .style("text-anchor", "end")
            .attr("dx", "-.8em")
            .attr("dy", ".15em")
            .attr("transform", function(d) {
                return "rotate(-45)" 
            });

    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
      .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .text('@Resource.Amount');

    svg.append("path")
        .datum(data)
        .attr("class", "line")
        .attr("d", line);
  
}

    chart {
        font: 10px sans-serif;
    }

    .axis path,
    .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
    }

    .x.axis path {
        /*display: none;*/
    }

    .line {
        stroke: rgb(142, 188, 0);
        stroke-width: 2px;
        stroke-linecap: square;
        stroke-linejoin: round;
        fill-opacity: 1;
        stroke-opacity: 1;
        fill: none;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<strong>Chart1</strong>
<div id="chart1"></div>
<br>
<strong>Chart2</strong>
<div id="chart2"></div>

做完一些工作后，我发现没有错， 这是我们的假设. 我们需要专注于小事情.

After doing some work out, I've came to know that there is nothing wrong, The thing is our assumption. We need to focus on little things.

1)观察您的数据 您的数据包含从日期{2014年12月18日星期四18:21:38 GMT + 0530(印度标准时间)} 到日期的日期{Fri Jan 09 2015 14:20:27 GMT + 0530 (印度标准时间)} 并且我们使用这些日期范围设置了x域，d3通过以指定格式显示来计算并安排比例尺以适合我们的宽度.格式为年-月-日Hours:Minutes:Seconds.请参见图表2 x轴

1)Observe your data Your data contains dates from Date {Thu Dec 18 2014 18:21:38 GMT+0530 (India Standard Time)} to Date {Fri Jan 09 2015 14:20:27 GMT+0530 (India Standard Time)} and we are setting x domain using these dates range, d3 is calculating and arranging the scale to fit in our width, by displaying in our specified format. The format is year-month-date Hours:Minutes:Seconds. See the Chart2 x-axis

还有

2)我已经删除了12月的数据，请参见Chart1的x轴.

2) I've removed that December month data, See the x-axis of the Chart1.

希望您能理解

这篇关于创建x轴时，如何强制d3js考虑几个小时?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！