Question

我有一些应用程序，应根据数据库中的值构建图形。我应该使用d3.js 我使用this guide。代码example运行正常。这是：

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

以下是我的代码的一部分，由于某种原因不起作用：

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

这是完整的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>

这并不会给div添加任何高度。此外，当我将其更改为selectAll（＆＃34; div＆＃34;）;没有添加任何div。谁能解释一下？

Answer 1

你忘记了分号，因为你评论了最后一行。你也应该参考＆＃34; d＆＃34;而不是＆＃34;价格＆＃34;正如Lars Kotthoff已经评论过的那样，在高度风格的功能中。然后将div放在p元素中也可能是个问题。但我对此并不确定。如果前两个提示没有帮助，请尝试更改附加的＆＃34; div＆＃34;到了＆＃34; p＆＃34; - 元素，不要忘记修改你的CSS。

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

Answer 2

我不确定你真正想要的是什么，但我构建了一个简单的案例，我认为这个问题可能已经足够了，请查看FIDDLE了解详细信息。

重要的代码是你应该一起使用ENTER，UPDATE和EXIT，只是附加不够。以下是相关代码。

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

d3.js问题。附加div

2 个答案: