Javascript D3图表显示随选项变化
我正在尝试使用d3编写一个小应用程序。 所以，我有一个下拉列表。每一个选择都会给我一个不同的图表。 下面是我的代码-Javascript D3图表显示随选项变化,javascript,jquery,d3.js,Javascript,Jquery,D3.js,我正在尝试使用d3编写一个小应用程序。 所以，我有一个下拉列表。每一个选择都会给我一个不同的图表。 下面是我的代码- <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="project.css">
</head>
<div id="options">
<select id="top10">
<option value="top10">Top 10</option>
<option value="top10cities">Top 10 most populated cities</option>
<option value="largestislands">Largest Islands</option>
</select>
<input type="button" value="Submit" id="button">
</div>
<div class = "barChart"></div>
</body>
<style>
.barChart div {
font: 10px sans-serif;
text-align: right;
padding: 20px;
margin: 1px;
color: white;
width: 100%;
-webkit-print-color-adjust: exact;
}
</style>
<script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
$(document).ready(function () {
//$(function () {
// $("#button").click(function () {
$("#top10").change( function (){
$(".barChart").hide();
var data = [];
if ($("#top10").val() == "largestislands") {
data = [{"name":"Greenland", "value":1000000}, {"name":"New Guinea", "value":786000}, {"name":"Borneo", "value":743122}, {"name":"Madagaskar", "value":587041}];
} else {
data = [{"name":"Seoul", "value":10229262}, {"name":"Mumbai", "value":9925891}, {"name":"Karachi", "value":9863000}];
}
barChart(data);
function barChart(data) {
var color = d3.scale
.ordinal()
.range(["green","bisque","red","violet","orange","brown","purple","magenta","cyan","coral" ]);
var x = d3.scale.linear().domain(
[ 0, 1000 ]).range(
[ 0, 1000 ]);
var height = 20;
// $(".barChart").hide();
d3
.select(".barChart")
.selectAll("div")
.data(data)
.enter()
.append("div")
.style("width", "1px")
.style("height",
height * 2 + "px")
.style("padding-top",
"0.1px")
.style("padding", "0.1px")
.style("background-color",
"black")
.append("div")
.style({
stroke : "black",
"stroke-width" : "2px"
})
.style(
"height",
function(d) {
return height
+ "px";
})
.style("font-size", "12px")
.style("margin-top", "10px")
.style("text-align", "left")
.style("color","black")
.style("width",
function(d) {
if ($("#top10").val() == "top10cities") {
return (d.value/10000)+ "px";
} else {
return (d.value/1000)+ "px";
}
})
.style(
"background-color",
function(d, i) {
return color(i);
})
.text(function(d, i) {
return data[i].name;
//return data[i].label;
})
.append("p")
.style(
"margin-top",
function(d) {
return -height
- 5
+ "px";
})
.style(
"margin-left",
function(d,i) {
if ($("#top10").val() == "top10cities") {
return (data[i].value/10000)+ "px";
} else {
return (data[i].value/1000)+ "px";
}
})
.style("color", "black")
.text(function(d,i) {
return data[i].value
});
}
$(".barChart").show();
});
});
//});
</script>
</html>
前十名
人口最多的十大城市
最大的岛屿
.barChart分区{
字体：10px无衬线；
文本对齐：右对齐；
填充：20px；
保证金：1px；
颜色：白色；
宽度：100%；
-webkit打印颜色调整：精确；
}
$（文档）.ready（函数（）{
//$（函数（）{
//$（“#按钮”）。单击（函数（）{
$（“#top10”）。更改（函数（）{
$（“.barChart”）.hide（）；
var数据=[]；
如果（$（“#top10”）.val（）=“最大的岛屿”）{
数据=[{“名称”：“格陵兰”，“价值”：1000000}，{“名称”：“新几内亚”，“价值”：786000}，{“名称”：“婆罗洲”，“价值”：743122}，{“名称”：“马达加斯加”，“价值”：587041}]；
}否则{
数据=[{“名称”：“首尔”，“值”：10229262}，{“名称”：“孟买”，“值”：9925891}，{“名称”：“卡拉奇”，“值”：9863000}]；
}
柱状图（数据）；
功能条形图（数据）{
var color=d3.0刻度
.序数（）
.范围（[“绿色”、“浅色”、“红色”、“紫色”、“橙色”、“棕色”、“紫色”、“洋红”、“青色”、“珊瑚色]）；
var x=d3.scale.linear（）域(
[0，1000]）。范围(
[ 0, 1000 ]);
var高度=20；
//$（“.barChart”）.hide（）；
d3
.选择（“.条形图”）
.selectAll（“div”）
.数据（数据）
.输入（）
.附加（“div”）
.样式（“宽度”、“1px”）
.style（“高度”，
高度*2+“像素”）
.style（“填充顶部”，
“0.1px”）
.样式（“填充”、“0.1px”）
.style（“背景色”，
“黑色”）
.附加（“div”）
.风格({
笔画：“黑色”，
“笔划宽度”：“2px”
})
.风格(
“高度”，
职能（d）{
返回高度
+“px”；
})
.style（“字体大小”，“12px”）
.样式（“页边空白顶部”、“10px”）
.style（“文本对齐”、“左”）
.style（“颜色”、“黑色”）
.style（“宽度”，
职能（d）{
如果（$（“#top10”）.val（）=“top10cities”）{
返回值（d.value/10000）+“px”；
}否则{
返回值（d.value/1000）+“px”；
}
})
.风格(
“背景色”，
功能（d，i）{
返回颜色（i）；
})
.文本（功能（d，i）{
返回数据[i]。名称；
//返回数据[i]。标签；
})
.附加（“p”）
.风格(
“页边空白处”，
函数（d）{
返回高度
- 5
+“px”；
})
.风格(
“左边距”，
功能（d，i）{
如果（$（“#top10”）.val（）=“top10cities”）{
返回（数据[i].value/10000）+“px”；
}否则{
返回值（数据[i].value/1000）+“px”；
}
})
.style（“颜色”、“黑色”）
.文本（功能（d，i）{
返回数据[i]。值
});
}
$（“.barChart”）.show（）；
});
});
//});
谁能帮我解决这个问题。更改1:更正您的数据集 选择“无”时传递空数组数据，如下所示
var data = [];//when none selected make it empty
if ($("#top10").val() == "largestislands") { //data when largest island selected
data = [{
"name": "Greenland",
"value": 1000000
}, {
"name": "New Guinea",
"value": 786000
}, {
"name": "Borneo",
"value": 743122
}, {
"name": "Madagaskar",
"value": 587041
}];
} else if ($("#top10").val() == "top10cities") { //data when largest top 10 cities selected
data = [{
"name": "Seoul",
"value": 10229262
}, {
"name": "Mumbai",
"value": 9925891
}, {
"name": "Karachi",
"value": 9863000
}];
}
退出删除数据更改上的条形图
工作示例您没有处理输入
，更新
，退出
模式。开始学习。
var sel = d3
.select(".barChart")
.selectAll("div")
.data(data, function(d) {
return d.name
});
sel.enter()
.append("div")
.style("width", "1px")
....//make bars
//remove old data bars.
sel.exit().remove();