Javascript d3.js问题。附加div
我有一些应用程序，应该根据数据库中的值构建图形。我应该使用d3.js 我用。 工作守则罚款。 这是：Javascript d3.js问题。附加div,javascript,jquery,html,css,d3.js,Javascript,Jquery,Html,Css,D3.js,我有一些应用程序，应该根据数据库中的值构建图形。我应该使用d3.js 我用。 工作守则罚款。 这是： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>D3 Demo: 5 divs with data</title> <script type="text/javascrip
<!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>
<!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>
在此处插入标题
酒吧{
显示：内联块；
宽度：20px；
高度：75px；
背景色：青色；
}
Начало периода:
Конец периода:
Список компаний
$（文档）.ready（函数（）{
$.ajax({
方法：“张贴”，
url:“./公司列表”，
数据：{“beginDate”：$（“#beginDate”）.text（），“endDate”：$（“#endDate”）.text（），
成功：功能（输出）{
$（“#公司列表”）.html（输出）；
$（“#结果”）.html（“它工作正常”）；
},
错误：函数（）{
警报（“故障”）；
$（“#结果”）.html（'提交时出错'）；
}
});
});
123
$（“.form horizontal”）.submit（函数（事件）{
event.preventDefault（）；
var请求=$.ajax({
方法：“张贴”，
url:“./定价列表”，
数据：{“beginDate”：$（“#beginDate”）.val（），“endDate”：$（“#endDate”）.val（），“company”：$（“.company:checked”）.val（），
成功：功能（结果）{
$（“#不可见”）.html（结果）；
},
错误：函数（）{
警报（“故障”）；
$（“#结果”）.html（'提交时出错'）；
}
});
$（文档）.ajaxComplete（函数（）{
var tmp=$（“#不可见”）.text（）.split（“+”）；
var dates=tmp[0]。拆分（“|”）；
var prices=tmp[1]。拆分（“|”）；
var monthAbbreviations=[‘一月’、‘二月’、‘三月’、‘四月’、‘五月’、‘六月’、‘七月’、‘八月’、‘九月’、‘十月’、‘十一月’、‘十二月’]；
var formattedDates=新数组（）；
对于（var i=0；i您忘记了分号，因为您注释了最后一行。您还应该引用“d”而不是“prices”正如Lars Kotthoff所评论的，在“height style function”中。那么在p元素中放置div也可能会有问题。但我不确定这一点。如果前两个提示没有帮助，请尝试将附加的“div”更改为“p”元素，然后别忘了修改css
d3.select("body").selectAll("p")
.data(prices)
.enter()
.append("div")
.attr("class","bar")
.style("height",function(d){
return d+"px";
});
我不知道你真正想要什么，但我建立了一个简单的情况，我认为这可能足以解决这个问题，请检查详细信息
重要的代码是您应该同时使用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();
你可能想要.selectAll（“p.bar”）
然后.style（“height”，function（d）{return d+“px；}）
。我照你说的做了。仍然不起作用。哈哈，问题是，我得到了一个浮动价格。我使用了你的解决方案，所以我接受你的答案。
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();