0

我的 HTML 页面如下所示：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link href="css/style.css" rel="stylesheet" />
</head>
<body>
    <div id="title">Statistics</div>
    <div id="chart"></div>

    <script src="js/libs/jquery.min.js"></script>
    <script src="js/libs/d3.min.js"></script>

    <script src="js/src/main.js"></script>
    <script>
        $(function() {
           HU.init(); 
        });
    </script>
</body>
</html>

我的javascript是这样的：

var HU = (function() {

var data = [
        {"time": "13:24:20", "level_1": "5553", "level_2": "4682", "level_3": "1005"},
        {"time": "14:24:20", "level_1": "6553", "level_2": "5682", "level_3": "2005"},
        {"time": "15:24:20", "level_1": "7553", "level_2": "6682", "level_3": "3005"},
        {"time": "16:24:20", "level_1": "8553", "level_2": "7682", "level_3": "3131"},
        {"time": "17:24:20", "level_1": "9953", "level_2": "5500", "level_3": "5005"},
        {"time": "18:24:20", "level_1": "8565", "level_2": "7682", "level_3": "6005"},
        {"time": "19:24:20", "level_1": "7753", "level_2": "4546", "level_3": "4405"}
    ];

init = function() {


    var margin = {
            top: 10, 
            right: 10, 
            bottom: 30, 
            left: 50
        },
        width = 950 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;

    var parseDate = d3.time.format("%H:%M:%S").parse;

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

    var y = d3.scale.linear()
            .range([height, 0]);

    var xAxis = d3.svg.axis()
            .scale(x)
            .orient("bottom")
            .tickFormat(d3.time.format(("%H:%M:%S")));

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

    var svg = d3.select("#chart").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 + ")");

    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0, " + height + ")")
        .call(xAxis);

    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis);

    var bars = svg.selectAll("rect")
        .data(data)
        .enter().append("rect")
        .attr("x", function(d) { return x(parseDate(d.time)); })
        .attr("y", function(d) { return y(d.level_1); })
        .attr("width", 15)
        .attr("height", function(d) { return height - y(d.level_1); })
        .style("fill", "steelblue");

};



return {
    init: init
};

})();

我想从 xAxis 上的 json 添加时间，并且所有三个级别在 yAxis 上相互重叠。页面的 CSS 是

body {
  font: 300 78px Helvetica Neue;
}

#title {
  font-size: 50px;
  margin: 20px;
  text-align: center;
  color: steelblue;
}

#chart {
  margin: 20px auto;
  position: relative;
  width: 900px;
  height: auto;
}

svg {
  font: 10px sans-serif;
}

.x.axis path {
  display: none;
}

.y.axis line {
  stroke: #fff;
  stroke-opacity: .4;
  shape-rendering: crispEdges;
}

.y.axis .zero line {
  stroke: #000;
  stroke-opacity: 1;
}

rect {
  fill-opacity: 0.9;
  fill: #777;
}

rect:first-child {
  fill: steelblue;
}

我怎么能做到这一点？提前致谢！

4

1 回答 1

0

您需要设置秤的域。

var x = d3.time.scale().domain(d3.extent(data, function(d) { return parseDate(d.time); }))
        .range([0, width]);

var y = d3.scale.linear().domain(d3.extent(data, function(d) { return d.level_1; }))
        .range([height, 0]);

在这里完成 jsfiddle 。

于 2013-10-06T12:24:03.507 回答