Javascript D3js：将v3升级到v5
我开始用D3JavaScript编写代码，我真的不知道这么多。我在互联网上找到了一个很好的例子，用下拉菜单更新条形图，然后开始学习并做一两次修改。这个例子在D3的版本3中，我想让它在版本5上工作。有没有人能给我一些建议，我可以做什么，使它在版本5工作 我将把代码放在下面，看看可以做什么更改 致以最良好的祝愿Javascript D3js：将v3升级到v5,javascript,d3.js,Javascript,D3.js,我开始用D3JavaScript编写代码，我真的不知道这么多。我在互联网上找到了一个很好的例子，用下拉菜单更新条形图，然后开始学习并做一两次修改。这个例子在D3的版本3中，我想让它在版本5上工作。有没有人能给我一些建议，我可以做什么，使它在版本5工作 我将把代码放在下面，看看可以做什么更改 致以最良好的祝愿 指标 身体{ 字体：10px无衬线； } 挑选{ 显示：块； } .酒吧{ 填充：蓝色； 不透明度：0.8； } .轴线路径， .轴线{ 填充：无； 行程：#000； 形状渲染：边缘清
指标
身体{
字体：10px无衬线；
}
挑选{
显示：块；
}
.酒吧{
填充：蓝色；
不透明度：0.8；
}
.轴线路径，
.轴线{
填充：无；
行程：#000；
形状渲染：边缘清晰；
}
//加载并移动数据，然后进行可视化。
var fileName=“./indicators.csv”；
var国家=[“奥地利”、“加拿大”、“智利”、“法国”、“意大利”，
“波兰”、“西班牙”、“瑞典”、“美国”]；
d3.csv（文件名、函数（错误、数据）{
变量指示符映射={}；
data.forEach（函数（d）{
var指标=d指标；
指示符映射[指示符]=[]；
//{指示符名称：[bar1Val，bar2Val，…]}
国家/地区。forEach（功能（字段）{
指示器映射[指示器]。按（+d[字段]）；
});
});
makeVis（指示图）；
});
var makeVis=函数（指示符映射）{
//定义可视信息的维度
var margin={顶部：30，右侧：50，底部：30，左侧：50}，
宽度=550-margin.left-margin.right，
高度=250-margin.top-margin.bottom；
//制作x刻度
var xScale=d3.scale.ordinal（）
.域名（国家）
.rangeRoundBands（[0，宽度]，0.1）；
//进行y缩放，域将在更新栏上定义
var yScale=d3.scale.linear（）
.范围（[高度，0]）；
//创建画布
var canvas=d3.选择（“可视容器”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
//制作x轴并添加到画布
var xAxis=d3.svg.axis（）
.scale（xScale）
.东方（“底部”）；
canvas.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
//制作y轴并添加到画布
var yAxis=d3.svg.axis（）
.刻度（yScale）
.东方（“左”）；
var yAxisHandleForUpdate=canvas.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）；
yAxisHandleForUpdate.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，6）
.attr（“dy”，“.71em”）
.style（“文本锚定”、“结束”）
.文本（“价值”）；
var updateBars=函数（数据）{
//首先更新y轴域以匹配数据
yScale.域（d3.范围（数据））；
yAxisHandleForUpdate.call（yAxis）；
var bar=canvas.selectAll（“.bar”）.data（数据）；
//为新数据添加栏
输入（）
.append（“rect”）
.attr（“类”、“条”）
.attr（“x”，函数（d，i）{return xScale（countries[i]）；}）
.attr（“宽度”，xScale.rangeBand（））
.attr（“y”，函数（d，i）{返回yScale（d）；}）
.attr（“高度”，函数（d，i）{返回高度-yScale（d）；}）；
//更新旧的，已经有以前的x/宽度
酒吧
.transition（）.持续时间（250）
.attr（“y”，函数（d，i）{返回yScale（d）；}）
.attr（“高度”，函数（d，i）{返回高度-yScale（d）；}）；
//去掉旧的
bar.exit（）.remove（）；
};
//下拉列表值更改的处理程序
var dropdownChange=函数（）{
var newIndicator=d3.select（this）.property（'value'），
newData=指示器映射[newIndicator]；
updateBars（新数据）；
};
//获取指标名称，用于下拉列表
var indicators=Object.keys（indicatorsMap.sort（）；
var下拉菜单=d3。选择（“vis容器”）
.插入（“选择”、“svg”）
.on（“更改”，下拉更改）；
下拉列表。选择全部（“选项”）
.数据（指标）
.enter（）.append（“选项”）
.attr（“值”，函数（d）{return d；}）
.文本（功能（d）{
返回d[0].toUpperCase（）+d.slice（1，d.length）；//第一个字母大写
});
var initialData=indicatorsMap[indicators[0]]；
更新巴（初始数据）；
};
<html>
<head>
<meta charset="utf-8">
<title>Indicators</title>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<!-- <script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script> -->
<style>
body {
font: 10px sans-serif;
}
select {
display: block;
}
.bar {
fill: blue;
opacity: 0.8;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
</style>
</head>
<body>
<div id='vis-container' align="right"></div>
<script type="text/javascript">
// Load and munge data, then make the visualization.
var fileName = "./indicators.csv";
var countries = ["Austria", "Canada", "Chile", "France", "Italy",
"Poland", "Spain", "Sweden", "USA"];
d3.csv(fileName, function(error, data) {
var indicatorsMap = {};
data.forEach(function(d) {
var indicator = d.indicator;
indicatorsMap[indicator] = [];
// { indicatorName: [ bar1Val, bar2Val, ... ] }
countries.forEach(function(field) {
indicatorsMap[indicator].push( +d[field] );
});
});
makeVis(indicatorsMap);
});
var makeVis = function(indicatorsMap) {
// Define dimensions of vis
var margin = { top: 30, right: 50, bottom: 30, left: 50 },
width = 550 - margin.left - margin.right,
height = 250 - margin.top - margin.bottom;
// Make x scale
var xScale = d3.scale.ordinal()
.domain(countries)
.rangeRoundBands([0, width], 0.1);
// Make y scale, the domain will be defined on bar update
var yScale = d3.scale.linear()
.range([height, 0]);
// Create canvas
var canvas = d3.select("#vis-container")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Make x-axis and add to canvas
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
canvas.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Make y-axis and add to canvas
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
var yAxisHandleForUpdate = canvas.append("g")
.attr("class", "y axis")
.call(yAxis);
yAxisHandleForUpdate.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Value");
var updateBars = function(data) {
// First update the y-axis domain to match data
yScale.domain( d3.extent(data) );
yAxisHandleForUpdate.call(yAxis);
var bars = canvas.selectAll(".bar").data(data);
// Add bars for new data
bars.enter()
.append("rect")
.attr("class", "bar")
.attr("x", function(d,i) { return xScale( countries[i] ); })
.attr("width", xScale.rangeBand())
.attr("y", function(d,i) { return yScale(d); })
.attr("height", function(d,i) { return height - yScale(d); });
// Update old ones, already have x / width from before
bars
.transition().duration(250)
.attr("y", function(d,i) { return yScale(d); })
.attr("height", function(d,i) { return height - yScale(d); });
// Remove old ones
bars.exit().remove();
};
// Handler for dropdown value change
var dropdownChange = function() {
var newIndicator = d3.select(this).property('value'),
newData = indicatorsMap[newIndicator];
updateBars(newData);
};
// Get names of indicators, for dropdown
var indicators = Object.keys(indicatorsMap).sort();
var dropdown = d3.select("#vis-container")
.insert("select", "svg")
.on("change", dropdownChange);
dropdown.selectAll("option")
.data(indicators)
.enter().append("option")
.attr("value", function (d) { return d; })
.text(function (d) {
return d[0].toUpperCase() + d.slice(1,d.length); // capitalize 1st letter
});
var initialData = indicatorsMap[ indicators[0] ];
updateBars(initialData);
};
</script>
</body>
</html>