Question

如何将x轴刻度带更改为刻度时间？到目前为止，我在执行此操作时遇到了很多麻烦。我认为拥有缩放时间会动态地更加有用。

我知道我必须进行一些更改，但是我无法完全使代码正常工作。

下面，我将所有内容组合在一起以使其变得更容易。应该能够复制并粘贴并运行它。

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="">
        <!-- Bootstrap Core CSS -->
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <!-- jQuery UI CSS -->
        <link rel="stylesheet" href="css/jquery-ui.min.css">
        <link rel="stylesheet" href="css/jquery-ui.structure.min.css">
        <link rel="stylesheet" href="css/jquery-ui.theme.min.css">
        <!-- Custom CSS -->
        <link rel="stylesheet" href="css/style.css">
      <script src="https://d3js.org/d3.v5.min.js"></script>
      <script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
    </head>

    <body>
        <nav class="navbar navbar-default"></nav>

            <div class="row">
                <div class="col-md-12">
                    <div id="chart-area"></div>                  
                </div>
            </div>


    <!-- External JS libraries -->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <script src="js/d3.min.js"></script>
    <!-- Custom JS -->
    <script>



var margin = { left:80, right:20, top:50, bottom:100 };

var width = 600 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

var parser = d3.timeParse("%Y-%m-%d");
var formatTime = d3.timeFormat("%d/%m/%y");


var g = d3.select("#chart-area")
    .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 Scale
    var x = d3.scaleBand()
        .range([0, width])
        .padding(0.2);

    // Y Scale
    var y = d3.scaleLinear()
        .range([height, 0]);

    // X Axis
    var xAxisGroup = g.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height +")");

    // Y Axis
    var yAxisGroup =  g.append("g")
        .attr("class", "y axis");



// X Label
g.append("text")
    .attr("y", height + 50)
    .attr("x", width / 2)
    .attr("font-size", "20px")
    .attr("text-anchor", "middle")
    .text("Date");

// Y Label
g.append("text")
    .attr("y", -60)
    .attr("x", -(height / 2))
    .attr("font-size", "20px")
    .attr("text-anchor", "middle")
    .attr("transform", "rotate(-90)")
    .text("Amount ");


var data = [
    {"DATE":"2018-10-05","AMOUNT":1.000000000000000e+002,"Running Total":1.000000000000000e+002},
    {"DATE":"2018-10-06","AMOUNT":1.000000000000000e+003,"Running Total":1.100000000000000e+003},
    {"DATE":"2018-10-07","AMOUNT":5.000000000000000e+003,"Running Total":6.100000000000000e+003},
    {"DATE":"2018-10-08","AMOUNT":2.000000000000000e+003,"Running Total":8.100000000000000e+003},
    {"DATE":"2018-10-09","AMOUNT":1.000000000000000e+003,"Running Total":9.100000000000000e+003},
    {"DATE":"2018-10-10","AMOUNT":5.000000000000000e+003,"Running Total":1.410000000000000e+004},
    {"DATE":"2018-10-11","AMOUNT":3.000000000000000e+003,"Running Total":2.510000000000000e+004},
    {"DATE":"2018-10-12","AMOUNT":1.200000000000000e+004,"Running Total":3.710000000000000e+004},
    {"DATE":"2018-10-13","AMOUNT":5.000000000000000e+003,"Running Total":4.210000000000000e+004}
];
    // console.log(data);

    // Clean data
    data.forEach(function(d) {
        d.AMOUNT = +d.AMOUNT;
        d.DATE = formatTime(parser(d.DATE));
    });
    d3.interval(function(){
        console.log("heyy");
    }, 1500);

    update(data);





function update(data){

    x.domain(data.map(function(d){ return d.DATE }));
    y.domain([0, d3.max(data, function(d) { return d.AMOUNT })]);

    var xAxisCall = d3.axisBottom(x);
    xAxisGroup.call(xAxisCall);

    var yAxisCall = d3.axisLeft(y)
        .ticks(4)
        .tickFormat(function(d) { return "$" + d3.format(",.0f")(d);});
    yAxisGroup.call(yAxisCall);

    var rects = g.selectAll("rect")
        .data(data)

    rects.enter()
        .append("rect")
            .attr("y", function(d){ return y(d.AMOUNT); })
            .attr("x", function(d){ return x(d.DATE) })
            .attr("height", function(d){ return height - y(d.AMOUNT); })
            .attr("width", x.bandwidth)
            .attr("fill", "grey");


}  

    </script>

    </body>
</html>

D3条形图x轴时间刻度

0 个答案: