CODEWITHSUNDEEP
javascriptjqueryhtmlcssd3.js
Sergey Scopin
Sergey Scopin

Reputation: 2245

d3.js issues. Appending div

I have some application, that should build graphics according to values from database. I should use d3.js I use this guide. Code of example works fine. Here it is:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3 Demo: 5 divs with data</title>
        <script type="text/javascript" src="../d3/d3.v3.min.js"></script>
        <style type="text/css">

            div.bar {
                display: inline-block;
                width: 20px;
                height: 75px;   /* Gets overriden by D3-assigned height below */
                background-color: teal;
            }

        </style>
    </head>
    <body>
        <script type="text/javascript">

            var dataset = [ 5, 10, 15, 20, 25 ];

            d3.select("body").selectAll("div")
                .data(dataset)
                .enter()
                .append("div")
                .attr("class", "bar")
                .style("height", function(d) {
                    return d + "px";
                });

        </script>
    </body>
</html>

Here is part of my code, that doesn't work for some reason:

 d3.select("body").selectAll("p.bar")
 .data(prices)
 .enter()
 .append("p")
 .attr("class","bar")
 .style("height",function(d){
     return d+"px";
 });

Here is full index.html:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
<title>Insert title here</title>
</head>
<style>
    div.bar {
        display: inline-block;
        width: 20px;
        height: 75px;  
        background-color: teal;
    }
</style>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<body>
<form action="./companyList" class="form-horizontal"  >
Начало периода:
<input type="text" name="beginDate" id="beginDate"></input>
Конец периода:
<input type="text" name="endDate" id="endDate"></input>
<input type="submit"></input>
<div id="listOfCompanies">
<h1>Список компаний</h1>
<script>
$(document).ready(function(){
    $.ajax({
        method:"POST",
        url: "./companyList",
        data: {"beginDate":$("#beginDate").text(),"endDate":$("#endDate").text()},  
        success: function(output){
        $("#listOfCompanies").html(output);
        $("#result").html("It works fine");
        },
        error:function(){
        alert("failure");
        $("#result").html('There is error while submit');
        }
    });

});
</script>
</div>
</form>
<div id="result">

</div>
<div id="invisible" >
</div>
<div id="invisible1" >
123
</div>
<script>
$(".form-horizontal").submit(function( event ) {
    event.preventDefault();
    var request=$.ajax({
        method:"POST",
        url: "./listOfPrices",
        data: {"beginDate":$("#beginDate").val(),"endDate":$("#endDate").val(),"company":$(".company:checked").val()},  
        success: function(result){
        $("#invisible").html(result);
        },
        error:function(){
        alert("failure");
        $("#result").html('There is error while submit');
        }
        });
    $( document ).ajaxComplete(function(){
        var tmp=$("#invisible").text().split("+");
        var dates=tmp[0].split("|");
        var prices=tmp[1].split("|");
        var monthAbbreviations = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
        var formattedDates=new Array();
        for (var i=0;i<dates.length;i++){
            var tmpDate=new Date(dates[i]);
            var day = tmpDate.getUTCDate();
            var mo = monthAbbreviations[tmpDate.getUTCMonth()];
            var yr = tmpDate.getUTCFullYear();
            var formattedDate = day + '-' + mo + '-' + yr;
            formattedDates.push(formattedDate);
        }
        console.log(prices);
        d3.select("body").selectAll("p")
            .data(prices)
            .enter()
            .append("div")
            .attr("class","bar")
            .style("height",function(d){
                return prices+"px";
            })
            //.style("margin-right","2px");
    });
});
</script>



</body>
</html>

That just doesn't append any height to divs. Also, when I change it to selectAll("div"); there is no any divs added. Can anyone explain?

Upvotes: 0

Views: 791

Answers (2)

linpingta
linpingta

Reputation: 2620

I am not sure what you really want but I build a simple case and I think it may be enough for this problem, please check FIDDLE for detail.

the important code is you should use ENTER, UPDATE and EXIT together, just append isn't enough. the following is related code.

var price = [10,30,20,50];

var svg = d3.select("body").selectAll("div")
.data(price);

svg.enter()
.append("div")
.attr("class","bar")
.style("height",function(d){
    return d+"px";
});

svg.attr("class","bar")
.style("height",function(d){
    return d+"px";
});

svg.exit().remove();

Upvotes: 1

Benjamin Kozlowski
Benjamin Kozlowski

Reputation: 178

You forgot the semicolon, because you commented the last line. Also you should reference "d" instead of "prices" inside the 'height-style-function', as Lars Kotthoff already commented. Then it also might be a problem to put a div inside a p-element. But i'm not sure about that. If the first two hints don't help, try to change the appended "div" to a "p"-element and don't forget to modify your css then.

 d3.select("body").selectAll("p")
        .data(prices)
        .enter()
        .append("div")
        .attr("class","bar")
        .style("height",function(d){
            return d+"px";
        });

Upvotes: 1

Related Questions