d3.js问题。附加div

我有一些应用程序，应根据数据库中的值生成图形。我应该使用d3.js 我使用this guide。代码example工作正常。这就是：d3.js问题。附加div

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

那只是不附加任何高度divs。另外，当我改变它selectAll（“div”）;没有添加任何div。谁能解释一下？

来源

2014-03-24 Sergey Scopin

你可能想'.selectAll（ “p.bar”）'然后'.style（ “高度”，函数（d）{回报d +“PX;}）' –

我那样做只是你说，仍然不起作用 –

您忘记了分号，因为您评论了最后一行。正如Lars Kotthoff已经评论的那样，你也应该在“高度风格函数”中引用“d”而不是“价格”。那么把一个div放入一个p元素也可能是一个问题。但我不确定这一点。如果前两个提示没有帮助，请尝试将附加的“div”更改为“p”元素，然后不要忘记修改您的css。

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

来源

2014-03-24 13:10:43

洛尔，问题是，我得到了一个浮动价格，我用你的解决方案，所以我接受你的答案。 –

我不知道你真正想要的，但我建立一个简单的例子，我想这可能是足以让这个问题，请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();

来源

2014-03-25 02:19:37 linpingta

d3.js问题。附加div

回答

相关问题