Javascript 忽略最后两个数据的填充
我有一个问题,如何绘制图表,但是数据中的LAS2数组忽略了css中的填充 我这里有代码:Javascript 忽略最后两个数据的填充,javascript,css,svg,linechart,Javascript,Css,Svg,Linechart,我有一个问题,如何绘制图表,但是数据中的LAS2数组忽略了css中的填充 我这里有代码: <html> <head> <title></title> <script src="d3.min.js"></script> <style> body { font: 10px sans-serif; } .grid path {
<html>
<head>
<title></title>
<script src="d3.min.js"></script>
<style>
body {
font: 10px sans-serif;
}
.grid path {
stroke-width: 0;
}
.axis path {
fill: #E0E0E0;
stroke: #bbb;
shape-rendering: crispEdges;
}
.axis text {
fill: #000;
}
.axis line {
stroke: #e7e7e7;
shape-rendering: crispEdges;
}
.axis .axis-label {
font-size: 10px;
}
.line {
stroke-width: 1;
}
</style>
</head>
<body>
<script>
var data = [
//VERD
[{'x':15000,'y':0}, {'x':15000,'y':130},{'x':40000,'y':130},{'x':40000,'y':0},
{'x':60000,'y':0},{'x':60000,'y':130},{'x':70000,'y':130},{'x':70000,'y':0},],
// GRIS PARADA
[{'x':40000,'y':0}, {'x':40000,'y':130}, {'x':60000,'y':130},{'x':60000,'y':0}],
//TARONJA TRABAJO
[{'x':16000,'y':40},{'x':16000,'y':80}, {'x':37000,'y':80}, {'x':37000,'y':40}],
//BLAU RALENTI
[{'x':17000,'y':0},{'x':17000,'y':40},{'x':35000,'y':40},{'x':35000,'y':0} ],
//LINEA VELOCITAT
[{'x':10000,'y':0},{'x':12000,'y':80}, {'x':15000,'y':70}, {'x':17000,'y':80},{'x':19000,'y':100},
{'x':20000,'y':55}, {'x':27000,'y':85}, {'x':33000,'y':65}, {'x':37000,'y':25}, {'x':40000,'y':65}, {'x':45000,'y':77},
{'x':50000,'y':47}, {'x':55000,'y':88}, {'x':59000,'y':25}, {'x':66000,'y':0}],
//LINEA TEMPERATURA
[{'x':10000,'y':0},{'x':12000,'y':20}, {'x':15000,'y':15}, {'x':17000,'y':18},{'x':19000,'y':17},
{'x':20000,'y':15}, {'x':27000,'y':19}, {'x':33000,'y':12}, {'x':37000,'y':21}, {'x':40000,'y':23}, {'x':45000,'y':15},
{'x':50000,'y':18}, {'x':55000,'y':19}, {'x':59000,'y':21}, {'x':66000,'y':20}]
];
var colors = [
'green',
'gray',
'orange',
'blue',
'red'
]
var margin = {top: 5, right: 30, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 200 - margin.top - margin.bottom;
var x = d3.scale.linear()
.domain([0, 86400])
.range([0, width]);
var y = d3.scale.linear()
.domain([0, 140])
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.ticks(10)
.tickSize(-height)
.tickPadding(10)
.tickSubdivide(true)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.ticks(5)
.tickPadding(10)
.tickSize(-width)
.tickSubdivide(true)
.orient("left");
var svg = d3.select("body").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 + ")");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
svg.append("g")
.attr("class", "y axis")
.append("text")
.attr("class", "axis-label")
.attr("transform", "rotate(-90)")
.attr("y", (-margin.left) + 10)
.attr("x", -height/2)
.text('KM/H');
svg.append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("width", width)
.attr("height", height);
var line = d3.svg.line()
.interpolate("linear")
.x(function(d) { return x(d.x); })
.y(function(d) { return y(d.y); });
svg.selectAll('.line')
.data(data)
.enter()
.append("path")
.attr("class", "line")
.attr("clip-path", "url(#clip)")
.attr('fill', function(d,i){
return colors[i%colors.length];
})
.attr("d", line);
</script>
</body>
</html>
身体{
字体:10px无衬线;
}
.网格路径{
笔画宽度:0;
}
.轴路径{
填充:#e0;
冲程:#bbb;
形状渲染:边缘清晰;
}
.轴文本{
填写:#000;
}
.轴线{
行程:#e7e7e7;
形状渲染:边缘清晰;
}
.axis.axis标签{
字体大小:10px;
}
.线路{
笔画宽度:1;
}
风险值数据=[
//佛得角
[{'x':15000,'y':0},{'x':15000,'y':130},{'x':40000,'y':130},{'x':40000,'y':0},
{'x':60000,'y':0},{'x':60000,'y':130},{'x':70000,'y':130},{'x':70000,'y':0},],,
//格里斯帕拉达酒店
[{'x':40000,'y':0},{'x':40000,'y':130},{'x':60000,'y':130},{'x':60000,'y':0}],
//塔罗尼亚·特拉巴霍
[{'x':16000,'y':40},{'x':16000,'y':80},{'x':37000,'y':80},{'x':37000,'y':40}],
//布劳拉伦蒂
[{'x':17000,'y':0},{'x':17000,'y':40},{'x':35000,'y':40},{'x':35000,'y':0}],
//速度线
[{'x':10000,'y':0},{'x':12000,'y':80},{'x':15000,'y':70},{'x':17000,'y':80},{'x':19000,'y':100},
{'x':20000,'y':55},{'x':27000,'y':85},{'x':33000,'y':65},{'x':37000,'y':25},{'x':40000,'y':65},{'x':45000,'y':77},
{'x':50000,'y':47},{'x':55000,'y':88},{'x':59000,'y':25},{'x':66000,'y':0},
//温度线
[{'x':10000,'y':0},{'x':12000,'y':20},{'x':15000,'y':15},{'x':17000,'y':18},{'x':19000,'y':17},
{'x':20000,'y':15},{'x':27000,'y':19},{'x':33000,'y':12},{'x':37000,'y':21},{'x':40000,'y':23},{'x':45000,'y':15},
{'x':50000,'y':18},{'x':55000,'y':19},{'x':59000,'y':21},{'x':66000,'y':20}]
];
变量颜色=[
“绿色”,
“灰色”,
“橙色”,
“蓝色”,
“红色”
]
var margin={顶部:5,右侧:30,底部:30,左侧:50},
宽度=960-margin.left-margin.right,
高度=200-margin.top-margin.bottom;
var x=d3.scale.linear()
.domain([086400])
.范围([0,宽度]);
变量y=d3.scale.linear()
.domain([0,140])
.范围([高度,0]);
var xAxis=d3.svg.axis()
.比例(x)
.滴答声(10)
.1尺寸(高度)
.1(10)
.tickSubdivide(真)
.东方(“底部”);
var yAxis=d3.svg.axis()
.比例(y)
.滴答声(5)
.1(10)
.1.1尺寸(-宽度)
.tickSubdivide(真)
.东方(“左”);
var svg=d3.选择(“正文”).追加(“svg”)
.attr(“宽度”,宽度+边距。左侧+边距。右侧)
.attr(“高度”,高度+边距。顶部+边距。底部)
.附加(“g”)
.attr(“转换”、“平移”(+margin.left+)、“+margin.top+”);
svg.append(“g”)
.attr(“类”、“x轴”)
.attr(“变换”、“平移(0)”、“高度+”)
.呼叫(xAxis);
svg.append(“g”)
.attr(“类”、“y轴”)
.呼叫(yAxis);
svg.append(“g”)
.attr(“类”、“y轴”)
.append(“文本”)
.attr(“类”、“轴标签”)
.attr(“变换”、“旋转(-90)”)
.attr(“y”,(-margin.left)+10)
.attr(“x”,高度/2)
.文本(“KM/H”);
svg.append(“clipPath”)
.attr(“id”、“剪辑”)
.append(“rect”)
.attr(“宽度”,宽度)
.attr(“高度”,高度);
var line=d3.svg.line()
.插入(“线性”)
.x(函数(d){return x(d.x);})
.y(函数(d){返回y(d.y);});
svg.selectAll(“.line”)
.数据(数据)
.输入()
.append(“路径”)
.attr(“类”、“行”)
.attr(“剪辑路径”、“url(#剪辑)”)
.attr('fill',函数(d,i){
返回颜色[i%colors.length];
})
.attr(“d”,行);
这里是实际结果:
我需要这个结果:
我怎样才能在没有填充的情况下显示最后一行?
真的是thx的家伙。当你想要
成为线条时,在SVG中使用stroke
属性而不是fill
。您应该通过attr回调函数中的索引来控制特定数据
svg.selectAll('.line')
.data(data)
.enter()
.append("path")
.attr("class", "line")
.attr("clip-path", "url(#clip)")
.attr('fill', function(d, i) {
return i < 4 ? colors[i % colors.length] : 'none';
})
.attr('stroke', function (d, i) {
return i >= 4 ? colors[i % colors.length] : 'none';
})
.attr("d", line);
svg.selectAll(“.line”)
.数据(数据)
.输入()
.append(“路径”)
.attr(“类”、“行”)
.attr(“剪辑路径”、“url(#剪辑)”)
.attr('fill',函数(d,i){
返回i<4种颜色[i%colors.length]:“无”;
})
.attr('stroke',函数(d,i){
返回i>=4种颜色[i%colors.length]:“无”;
})
.attr(“d”,行);
看看小提琴:
我解决了这个问题,但无论如何,我认为你的解决方案比我的好:D