Bootstrap + d3.js堆叠图

时间：2016-05-26 17:05:11

标签： javascript html5 d3.js

我想要在网页上显示两个大图（页面宽度）。

图表已做出回应。

目前，图表显示在彼此之上。我的猜测是，由于使用JavaScript调整图形大小，div不会调整大小或生效高度为0（如果我从CSS中删除position: absolute，则会发生这种情况。

两个图的JavaScript代码完全相同。我唯一改变的是更改图表的变量名称，并更改了注入图表的div的id。

我尝试在CSS中使用position，使用float以及找到的所有常规内容。

我真的没有想法。非常感谢任何帮助。

Ps：我试过把它放到Codepen但是无法让它工作。可以在http://call-cc.be:5000/

找到源的实例

CSS 

body {
    padding-top: 50px;
    background-color: #fefefe;
}

/*Graphs*/

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

.axis text {
    fill: #555;
}

.line {
    fill: none;
    stroke: #65a2ef;
    stroke-width: 1.5px;
}

#humidity, #temperature {
    width: 100%;
    height: 100%;
    position: absolute;
}

湿度图javascript 

var margin = 50,
    width = parseInt(d3.select("#humidity").style("width")) - margin * 2,
    height = parseInt(d3.select("#humidity").style("height")) - margin * 2;

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

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

var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom");

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

var line = d3.svg.line()
    .interpolate("basis")
    .x(function (d) {
        return xScale(d.date);
    })
    .y(function (d) {
        return yScale(d.close);
    });

var humidityChart = d3.select("#humidity").append("svg")
    .attr("width", width + margin * 2)
    .attr("height", height + margin * 2)
    .append("g")
    .attr("transform", "translate(" + margin + "," + margin + ")");

d3.csv("/push/humidity", function (error, data) {
    data.forEach(function (d) {
        var dt = new Date();
        dt.setUTCSeconds(parseInt(d.timestamp));
        d.date = dt;
        d.close = parseFloat(d.value);
    });

    xScale.domain(d3.extent(data, function (d) {
        return d.date;
    }));
    console.log(d3.extent(data, function (d) {
        return d.date;
    }));
    yScale.domain(d3.extent(data, function (d) {
        return d.close;
    }));

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

    humidityChart.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("Temperature (Celcius)");

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


    function resize() {
        console.log('humidity resizing');

        //var width = d3.select("#humidity").getBoundingClientRect().width;
        var width = parseInt(d3.select("#humidity").style("width")) - margin * 2;
        var height = parseInt(d3.select("#humidity").style("height")) - margin * 2;

        xScale.range([0, width]).nice();
        yScale.range([height, 0]).nice();

        yAxis.ticks(Math.max(height / 50, 2));
        xAxis.ticks(Math.max(width / 100, 2));

        humidityChart.select('.x.axis')
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);

        humidityChart.select('.y.axis')
            .call(yAxis);

        humidityChart.selectAll('.line')
            .attr("d", line);
    }

    window.addEventListener('resize', resize);

    resize();
});

温度图javascript 

var margin = 50,
    width = parseInt(d3.select("#temperature").style("width")) - margin * 2,
    height = parseInt(d3.select("#temperature").style("height")) - margin * 2;

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

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

var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom");

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

var line = d3.svg.line()
    .interpolate("basis")
    .x(function (d) {
        return xScale(d.date);
    })
    .y(function (d) {
        return yScale(d.close);
    });

var temperatureChart = d3.select("#temperature").append("svg")
    .attr("width", width + margin * 2)
    .attr("height", height + margin * 2)
    .append("g")
    .attr("transform", "translate(" + margin + "," + margin + ")");

d3.csv("/push/temperature", function (error, data) {
    data.forEach(function (d) {
        var dt = new Date();
        dt.setUTCSeconds(parseInt(d.timestamp));
        d.date = dt;
        d.close = parseFloat(d.value);
    });

    xScale.domain(d3.extent(data, function (d) {
        return d.date;
    }));
    console.log(d3.extent(data, function (d) {
        return d.date;
    }));
    yScale.domain(d3.extent(data, function (d) {
        return d.close;
    }));

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

    temperatureChart.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("Temperature (Celcius)");

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


    function resize() {

        console.log('temperature resizing');

        //var width = d3.select("#temperature").getBoundingClientRect().width;
        var width = parseInt(d3.select("#temperature").style("width")) - margin * 2;
        var height = parseInt(d3.select("#temperature").style("height")) - margin * 2;

        xScale.range([0, width]).nice();
        yScale.range([height, 0]).nice();

        yAxis.ticks(Math.max(height / 50, 2));
        xAxis.ticks(Math.max(width / 100, 2));

        temperatureChart.select('.x.axis')
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);

        temperatureChart.select('.y.axis')
            .call(yAxis);

        temperatureChart.selectAll('.line')
            .attr("d", line);
    }

    d3.select(window).on('resize', resize);

    resize();
});

HTML

有问题的代码位于底部。定义了两个div：一个标识为temperature，另一个标识为humidity。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" type="image/png" href="/img/favicon.png"/>
    <title>Pok Pok</title>

    <!-- bower:css -->
    <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css" />
    <!-- endbower -->

    <!-- bower:js -->
    <script src="/lib/jquery/dist/jquery.js"></script>
    <script src="/lib/bootstrap/dist/js/bootstrap.js"></script>
    <!-- endbower -->

    <!-- inject:css -->
    <link rel="stylesheet" href="/css/starter-template.css">
    <!-- endinject -->

    <!-- inject:js -->
    <script src="/js/ie-emulation-modes-warning.js"></script>
    <script src="/js/ie10-viewport-bug-workaround.js"></script>
    <!-- endinject -->


    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<style>


</style>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                    aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Pok Pok</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <% for(var i = 0; i < nav.length; i++) { %>
                <li><a href="<%= nav[i].link %>"><%= nav[i].text %></a></li>
                <% } %>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</nav>



<!--The container-->
<div class="row">
    <div class="col-md-12" id="humidity">

    </div>
</div>

<div class="row">
    <div class="col-md-12" id="temperature">

    </div>
</div>
</body>

<!-- load the d3.js library -->
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/graphs/humidity.js"></script>
<script src="/graphs/temperature.js"></script>

</html>

0 个答案:

没有答案
相关问题
最新问题