Question

这是我根据我的上一个问题找到的问题，可以在这里找到：link

在链接中有一个小提琴，现在我意识到如果我有3个日期：

12.12.12 12:12:12 // 2012年12月12日

12.12.12 11:12:12

12.12.12 10:12:12

这是相同的日期，但差异只是1小时，然后这个差异没有显示在图表上。

我只想在x轴上显示那些日期和小时，这实际上是数据的一部分，并且做了一些事情，所以如果事情发生在同一个日期，实际上可以在图表上看到1小时差异，所以情节不会彼此重叠。

可以以任何方式完成吗？

Answer 1

创建x轴时，可以使用

指示刻度间隔

.ticks(d3.time.hour, 1)

每1小时打一次。有关详细信息，请参阅scale.ticks()的文档。

这是工作代码

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);
        })
        .ticks(d3.time.hour, 1)
        .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>

如何在d轴上为d3js中的时间刻度指定刻度线？

1 个答案: