D3.Js条形图问题
我正在尝试使用D3.js绘制条形图，但没有成功。 我试着如下 Model.cs 公共类柱状图 { 公共日期时间任务日期{get；set；} 公共浮点持续时间{get；set；} } Index.cshtml 在my Index.cshtml中（razor语法，mvc视图） 我有以下代码来绘制条形图D3.Js条形图问题,d3.js,D3.js,我正在尝试使用D3.js绘制条形图，但没有成功。 我试着如下 Model.cs 公共类柱状图 { 公共日期时间任务日期{get；set；} 公共浮点持续时间{get；set；} } Index.cshtml 在my Index.cshtml中（razor语法，mvc视图） 我有以下代码来绘制条形图 <head> <meta name="viewport" content="width=device-width" /> <title> Repor
<head>
<meta name="viewport" content="width=device-width" />
<title> Report</title>
<script type="text/javascript" src="/Scripts/d3.js"></script>
<script type="text/javascript" src="https:/Scripts/d3pie.js"></script>
<script type="text/javascript" src="https:/Scripts/d3.tip.v0.6.3.js"></script>
.axis path, .axis line
{
fill: none;
stroke: #777;
shape-rendering: crispEdges;
}
.axis text
{
font-family: 'Arial';
font-size: 13px;
}
.tick
{
stroke-dasharray: 1, 2;
}
.bar
{
fill: FireBrick;
}
</head>
报告
.轴路径，.轴线
{
填充：无；
行程：777；
形状渲染：边缘清晰；
}
.轴文本
{
字体系列：“Arial”；
字体大小：13px；
}
打上钩
{
笔划数组：1,2；
}
.酒吧
{
填料：耐火砖；
}
<svg id="visualisation" width="1000" height="500"></svg>
<script>
var jsonData = @Html.Raw(Json.Encode(Model.BarChart));
data = jsonData;
InitChart();
function InitChart() {
var barData = data;
var vis = d3.select('#visualisation'),
WIDTH = 1000,
HEIGHT = 500,
MARGINS = {
top: 20,
right: 20,
bottom: 20,
left: 50
},
xRange = d3.scale.ordinal().rangeRoundBands([MARGINS.left, WIDTH - MARGINS.right], 0.1).domain(barData.map(function (d) {
return d.Date;
})),
yRange = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([0,
d3.max(barData, function (d) {
return d.Duration;
})
]),
xAxis = d3.svg.axis()
.scale(xRange)
.tickSize(5)
.tickSubdivide(true),
yAxis = d3.svg.axis()
.scale(yRange)
.tickSize(5)
.orient("left")
.tickSubdivide(true);
vis.append('svg:g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + (HEIGHT - MARGINS.bottom) + ')')
.call(xAxis);
vis.append('svg:g')
.attr('class', 'y axis')
.attr('transform', 'translate(' + (MARGINS.left) + ',0)')
.call(yAxis);
vis.selectAll('rect')
.data(barData)
.enter()
.append('rect')
.attr('x', function (d) {
return xRange(d.Date);
})
.attr('y', function (d) {
return yRange(d.Duration);
})
.attr('width', xRange.rangeBand())
.attr('height', function (d) {
return ((HEIGHT - MARGINS.bottom) - yRange(d.Duration));
})
.attr('fill', 'grey')
.on('mouseover', function (d) {
d3.select(this)
.attr('fill', 'blue');
})
.on('mouseout', function (d) {
d3.select(this)
.attr('fill', 'grey');
});
}
</script>
var jsonData=@Html.Raw（Json.Encode（Model.BarChart））；
数据=jsonData；
InitChart（）；
函数InitChart（）{
var barData=数据；
var vis=d3。选择（#可视化），
宽度=1000，
高度=500，
边距={
前20名，
右:20,，
底数：20，
左：50
},
xRange=d3.scale.ordinal（）.rangeRoundBands（[MARGINS.left，WIDTH-MARGINS.right]，0.1）.域（barData.map）（函数（d）{
返回日期；
})),
yRange=d3.scale.linear（）.range（[HEIGHT-MARGINS.top，MARGINS.bottom]）.domain（[0，
d3.最大值（barData，函数（d）{
返回d.持续时间；
})
]),
xAxis=d3.svg.axis（）
.刻度（X范围）
.尺寸（5）
.tickSubdivide（真），
yAxis=d3.svg.axis（）
.刻度（Y量程）
.尺寸（5）
.东方（“左”）
.tickde（真）；
vis.append（'svg:g'）
.attr（'class'，'x轴'）
.attr（'transform'，'translate（0'，+（HEIGHT-MARGINS.bottom）+'））
.呼叫（xAxis）；
vis.append（'svg:g'）
.attr（'class'，'y轴'）
.attr（'transform'，'translate（+（MARGINS.left）+'，0'））
.呼叫（yAxis）；
vis.selectAll（'rect'））
.数据（barData）
.输入（）
.append（'rect'）
.attr（'x'，函数（d）{
返回范围（d.日期）；
})
.attr（'y'，函数（d）{
返回Y范围（d.持续时间）；
})
.attr（'width'，xRange.rangeBand（））
.attr（高度），功能（d）{
返回（（高度-边距.底部）-Y范围（d.持续时间））；
})
.attr（'填充'，'灰色'）
.on（'mouseover'，函数（d）{
d3.选择（本）
.attr（“填充”、“蓝色”）；
})
.on（'mouseout'，函数（d）{
d3.选择（本）
.attr（“填充”、“灰色”）；
});
}
Error: Invalid value for <rect> attribute height="NaN"
Error: Invalid value for <rect> attribute y="NaN"
错误：属性height=“NaN”的值无效
错误：属性y=“NaN”的值无效
d.yd.durationd.durationdatabarDatajsonData您是否检查了
yRange（d.y）yRange（…）