Javascript d3 v5在缩放轴时使用嵌套值
我有以下基于区域和日期嵌套数据的代码。我遇到的问题是，我不知道如何定义yScale来动态绘制轴，以便返回嵌套数据的最大和（嵌套数据的最大值高于它聚合的数据集bc中的最大值）。因此，我的yAxis被截断，图表并没有显示所有数据 在代码中，如果我将域硬编码为.domain（[03500]），则轴是正确的，否则它是不正确的。我不想硬编码这个域。如何引用嵌套值 编辑以显示注释中提供的代码，这有助于但不能完全修复脚本在整个数据集上运行的问题。请看下面的图片Javascript d3 v5在缩放轴时使用嵌套值,javascript,d3.js,nested,linechart,Javascript,D3.js,Nested,Linechart,我有以下基于区域和日期嵌套数据的代码。我遇到的问题是，我不知道如何定义yScale来动态绘制轴，以便返回嵌套数据的最大和（嵌套数据的最大值高于它聚合的数据集bc中的最大值）。因此，我的yAxis被截断，图表并没有显示所有数据 在代码中，如果我将域硬编码为.domain（[03500]），则轴是正确的，否则它是不正确的。我不想硬编码这个域。如何引用嵌套值 编辑以显示注释中提供的代码，这有助于但不能完全修复脚本在整个数据集上运行的问题。请看下面的图片 var yScale = d3.sc
var yScale = d3.scaleLinear()
.domain([0, d3.max(dataset, function(d) {
return parseInt(d.count,10);
})])
.range([h - padding, padding])
// var yScale = d3.scaleLinear()
// .domain([0, 3500])
// .range([h - padding, padding]) //not supposed to hard code the scale but it is not working
嵌套图
.分页符{
前分页符：始终；
}
.轴线路径，
.轴线{
填充：无；
笔画：黑色；
形状渲染：边缘清晰；
}
.轴文本{
字体系列：无衬线；
字体大小：11px；
}
.点{
填充：无；
尺寸：2件
}
多特先生{
填充：#ffab00；
冲程：#fff；
}
var parseTime=d3.timeParse（“%Y”）；
var保证金={
前20名，
右:20,，
底数：30，
左：50
},
w=960-页边距。左侧-页边距。右侧，
h=500-页边距.top-页边距.bottom；
var=20；
/////////////////获取数据//////
const csv=`州、地区、年份、计数
阿拉巴马州南部，2010年1月
阿拉巴马州南部，2011年，1
阿拉巴马州南部，2012,0
阿拉巴马州南部，2013,0
阿拉巴马州南部，2014年2月
阿拉巴马州南部，2015,6
阿拉斯加西部，20102245
阿拉斯加州西部，20111409
阿拉斯加西部，20121166
阿拉斯加西部，20131329
阿拉斯加西部，20141296
阿拉斯加州西部，20151575
康涅狄格州，东北部，2010,0
康涅狄格州，东北部，2011,0
康涅狄格州东北部，2012,0
康涅狄格州，东北部，2013,0
康涅狄格州，东北部，2014,0
康涅狄格州东北部，2015,1
密苏里州，中西部，2010,2
密苏里州，中西部，2011,3
密苏里州，中西部，2012,2
密苏里州，中西部，2013,0
密苏里州，中西部，2014年，1
密苏里州，中西部，2015,5
加利福尼亚州西部，2010546
加利福尼亚州西部，2012243
加利福尼亚州西部，2013240
怀俄明州西部，2015198
加利福尼亚州西部，2011195
加利福尼亚州西部，2014191`；
常量数据集=d3.csvParse（csv）；
dataset.forEach（函数（d）{
d、 日期=时间（d.年）；
d、 地区=d[‘地区’]；
d、 state=d['state']；
d、 计数=d['count']；
//控制台日志（d）
});
/////////////////缩放数据//////////////////
var xScale=d3.scaleTime（）
.domain（[d3.min（数据集，函数（d））{
返回日期
})，d3.max（数据集，函数（d）{
返回日期
})]).范围（[padding，w-padding*2]）
var yScale=d3.scaleLinear（）
.domain（[0，d3.max（数据集，函数（d））{
console.log（d.count）
在此处返回d.count///错误
})]).范围（[h-填充，填充]）
//var yScale=d3.scaleLinear（）
//.domain（[03500]）
//.range（[h-padding，padding]）//不应该硬编码刻度，但它不起作用……上面注释掉了
var xAxis=d3.axisBottom（）.scale（xScale）；
var yAxis=d3.axisLeft（）.scale（yScale）；
/////////////////图表从这里开始//////////////////
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，w+边距。左侧+边距。右侧）
.attr（“高度”，h+margin.top+margin.bottom）
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
var svg1=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，w+边距。左侧+边距。右侧）
.attr（“高度”，h+margin.top+margin.bottom）
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
//界定界线
var valueLine=d3.line（）
.x（功能（d）{
返回xScale（新日期（d键））；
})
.y（功能（d）{
返回Y刻度（d值）；
})
var nest=d3.nest（）
.键（功能（d）{
返回d区；
})
.键（功能（d）{
返回日期；
})
.汇总（功能（叶）{
返回d3.和（叶，函数（d）{
返回（d.count）
});
})
.条目（数据集）
console.log（嵌套）
//设置配色方案
var colors=d3.scaleOrdinal（）
.domain（[“南部”、“西部”、“东北部”、“中西部”]）
.范围（[“EF5285”、“88F284”、“5965A3”、“900C3F”）；
var regYear=svg.selectAll（“.regYear”）
.数据（嵌套）
.输入（）
.附加（“g”）
.attr（“笔划”，函数（d）{返回颜色（d.key）}）；//添加颜色！
//console.log（regYear）
var path=regYear.selectAll（“.line”）
.数据（功能（d）{
返回[d.值]
})
.输入（）
.append（“路径”）；
//划清界限
路径
.attr（“d”，函数（d）{
返回值行（d）
})
.attr（“类”、“行”）
.样式（“填充”、“无”）；
svg.selectAll（“.dot”）
.数据（数据集）
.enter（）.append（“圆”）//使用enter（）.append（）方法
.attr（“class”，“dot”）//为样式指定一个类
.attr（“cx”，函数（d，i）{return xScale（i）}）
.attr（“cy”，函数（d）{return yScale（d.count）}）//这不起作用
.attr（“r”，5）；
svg.append（“g”）.attr（“class”、“axis”）.attr（“transform”、“translate（0）”+（h-padding）+”）.call（xAxis）；
//画Y轴
svg.append（“g”）.attr（“类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Nested Chart</title>
<script src="https://d3js.org/d3.v5.min.js"></script>
<style type="text/css">
.pagebreak {
page-break-before: always;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
.point {
fill: none;
size: 2px
}
.dot {
fill: #ffab00;
stroke: #fff;
}
</style>
</head>
<div style="width:800px; margin:0 auto;" class='body'></div>
<div class="pagebreak"> </div>
<body>
<script type="text/javascript">
var parseTime = d3.timeParse("%Y");
var margin = {
top: 20,
right: 20,
bottom: 30,
left: 50
},
w = 960 - margin.left - margin.right,
h = 500 - margin.top - margin.bottom;
var padding = 20;
/////////////////get the data//////////////////
const csv = `state,region,year,count
Alabama,South,2010,1
Alabama,South,2011,1
Alabama,South,2012,0
Alabama,South,2013,0
Alabama,South,2014,2
Alabama,South,2015,6
Alaska,West,2010,2245
Alaska,West,2011,1409
Alaska,West,2012,1166
Alaska,West,2013,1329
Alaska,West,2014,1296
Alaska,West,2015,1575
Connecticut,Northeast,2010,0
Connecticut,Northeast,2011,0
Connecticut,Northeast,2012,0
Connecticut,Northeast,2013,0
Connecticut,Northeast,2014,0
Connecticut,Northeast,2015,1
Missouri,Midwest,2010,2
Missouri,Midwest,2011,3
Missouri,Midwest,2012,2
Missouri,Midwest,2013,0
Missouri,Midwest,2014,1
Missouri,Midwest,2015,5
California,West,2010,546
California,West,2012,243
California,West,2013,240
Wyoming,West,2015,198
California,West,2011,195
California,West,2014,191`;
const dataset = d3.csvParse(csv);
dataset.forEach(function(d) {
d.date = parseTime(d.year);
d.region = d['region'];
d.state = d['state'];
d.count = d['count'];
//console.log(d)
});
/////////////////scales the data//////////////////
var xScale = d3.scaleTime()
.domain([d3.min(dataset, function(d) {
return d.date
}), d3.max(dataset, function(d) {
return d.date
})]).range([padding, w - padding * 2])
var yScale = d3.scaleLinear()
.domain([0, d3.max(dataset, function(d) {
console.log(d.count)
return d.count ///ERROR HERE
})]).range([h - padding, padding])
// var yScale = d3.scaleLinear()
// .domain([0, 3500])
// .range([h - padding, padding]) //not supposed to hard code the scale but it is not working otherwise...commented out above
var xAxis = d3.axisBottom().scale(xScale);
var yAxis = d3.axisLeft().scale(yScale);
/////////////////charts start here//////////////////
var svg = d3.select("body").append("svg")
.attr("width", w + margin.left + margin.right)
.attr("height", h + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
var svg1 = d3.select("body").append("svg")
.attr("width", w + margin.left + margin.right)
.attr("height", h + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
//Define the line
var valueLine = d3.line()
.x(function(d) {
return xScale(new Date(d.key));
})
.y(function(d) {
return yScale(d.value);
})
var nest = d3.nest()
.key(function(d) {
return d.region;
})
.key(function(d) {
return d.date;
})
.rollup(function(leaves) {
return d3.sum(leaves, function(d) {
return (d.count)
});
})
.entries(dataset)
console.log(nest)
// Set the color scheme
var colors = d3.scaleOrdinal()
.domain(["South", "West", "Northeast","Midwest"])
.range(["#EF5285", "#88F284" , "#5965A3","#900C3F"]);
var regYear = svg.selectAll(".regYear")
.data(nest)
.enter()
.append("g")
.attr("stroke", function(d){ return colors(d.key)}); // Adding color!
// console.log(regYear)
var paths = regYear.selectAll(".line")
.data(function(d) {
return [d.values]
})
.enter()
.append("path");
// Draw the line
paths
.attr("d", function(d) {
return valueLine(d)
})
.attr("class", "line")
.style("fill", "none");
svg.selectAll(".dot")
.data(dataset)
.enter().append("circle") // Uses the enter().append() method
.attr("class", "dot") // Assign a class for styling
.attr("cx", function(d, i) { return xScale(i) })
.attr("cy", function(d) { return yScale(d.count) })//this is not working
.attr("r", 5);
svg.append("g").attr("class", "axis").attr("transform", "translate(0," + (h - padding) + ")").call(xAxis);
//draw Y axis
svg.append("g").attr("class", "axis").attr("transform", "translate(" + padding + ",0)").call(yAxis);
// add label
svg.append("text").attr("x", (w / 2)).attr("y", h + 30).attr("text-anchor", "middle").text("Year");
svg.append("text").attr("x", padding).attr("y", padding - 20).attr("text-anchor", "middle").text("# of Events");
//add title
svg.append("text").attr("x", (w / 2)).attr("y", padding).attr("text-anchor", "middle").text("Events per Year by Category");
// add legend
var legend = svg.append("g")
.attr("class", "legend")
.attr("x", w - 65)
.attr("y", 25)
.attr("height", 100)
.attr("width", 100);
////////////////////////////////////END///////////////////////////
</script>
</body>
</html>
var maxCountSum = d3.max(nest, function(d) {
return d3.max(d.values, function (f) {
return f.value
});
});
var yScale = d3.scaleLinear()
.domain([0, maxCountSum]).range([height, 0]);