Javascript 自举&x2B；d3.js堆叠图_Javascript_Html_D3.js

Javascript 自举&x2B；d3.js堆叠图

javascript html d3.js

Javascript 自举&x2B；d3.js堆叠图,javascript,html,d3.js,Javascript,Html,D3.js,我有两个大图（页面宽度），我想显示在网页上这些图表已做出响应目前，图形显示在彼此的顶部。我的猜测是，由于使用JavaScript调整了图形的大小，div没有调整大小，或者实际上高度为0（如果我从CSS中删除position:absolute，就会出现这种情况）这两个图形的JavaScript代码是相同的。我唯一更改的是更改图表的变量名，并更改要插入图形的div的id 我尝试过在CSS中使用position，使用float和所有常规的东西我真的没有主意了。非常感谢您的帮助 Ps：我试着把它

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

这些图表已做出响应

目前，图形显示在彼此的顶部。我的猜测是，由于使用JavaScript调整了图形的大小，div没有调整大小，或者实际上高度为0（如果我从CSS中删除

position:absolute

，就会出现这种情况）

这两个图形的JavaScript代码是相同的。我唯一更改的是更改图表的变量名，并更改要插入图形的div的

id

我尝试过在CSS中使用

position

，使用

float

和所有常规的东西

我真的没有主意了。非常感谢您的帮助

Ps：我试着把它放进一个代码笔，但没能让它工作。一个源代码的实例可以在

CSS 湿度图javascript 温度图 HTML 有问题的代码位于底部。定义了两个

div

s：一个id

temperature

，另一个id

湿度

<!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>


博克博克
切换导航

你能分享温度代码吗？检查DOM时，我看不到湿度的div（id=“湿度”）.为什么两个div都设置为posición absolute？请尝试删除该cssline@torresomar：当我删除该CSS行时，div仅为20px高。即使在调整大小后也是如此。Gerado Furtado：div位于我在此发布的最后一个文件中。并且添加了温度图的代码。但是，它完全相同，只是“#湿度”替换为“#temperature”和带有“temperatureChart”的“humidityChart”。目前，我通过在javascript中设置图表的高度来修复它，即宽度：

height=（width/16）*9；

是否有问题，您有

var xScale

、

var yScale

、

var xAxis

和

var yAxis

都定义了两次？我注意到，调整大小会导致轴完全相同。可能会为每个图形唯一地命名这些轴。您可以共享温度代码吗？检查DOM，我看不到div f或者湿度（id=“湿度”）。为什么两个div都设置为posición absolute？尝试删除该cssline@torresomar：当我删除该CSS行时，div仅为20px高。即使在调整大小后也是如此。Gerado Furtado：div位于我在此发布的最后一个文件中。并且添加了温度图的代码。但是，它完全相同，除了“#“湿度”替换为“#温度”，而“湿度图表”替换为“temperatureChart”。目前，我通过在javascript中设置图表的高度来修复它，即宽度：

height=（width/16）*9；

可能是因为定义了两次

var xScale

、

var yScale

、

var xAxis

和

var yAxis

而造成的问题吗？我注意到，调整大小会导致轴完全相同。可能会为每个图形唯一地命名这些轴。

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();
});

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();
});

<!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>