隐藏/显示价值图表
[英]Hide/Show value chart
问题描述
我在隐藏和显示带有填充和描边的折线图中的值时遇到问题。
我有这个代码。 如果单击第一个按钮，它将隐藏1值；如果单击第二个按钮，我想隐藏2值，但再次显示1值。
<html>
<head>
<title></title>
<script src="d3.min.js"></script>
<style>
body {
font: 10px sans-serif;
}
.axis path {
fill: #E0E0E0;
stroke: #bbb;
shape-rendering: crispEdges;
}
.axis text {
fill: #000;
}
.axis line {
stroke-width: 1;
}
.axis .axis-label {
font-size: 10px;
}
.line {
stroke-width: 2;
}
.y.axis line, .y.axis path {
fill: none;
stroke: gray;
shape-rendering: crispEdges;
stroke-width: 1;
}
</style>
</head>
<body>
<input type="button" name="0" value="amaga" id="amaga" onclick="asd(this.name);"/>
<input type="button" name="1" value="amaga" id="amaga" onclick="asd(this.name);"/>
<input type="button" name="2" value="amaga" id="amaga" onclick="asd(this.name);"/>
<input type="button" name="3" value="amaga" id="amaga" onclick="asd(this.name);"/>
<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 = [
'#B4EEB4',
'gray',
'orange',
'blue',
'red',
'pink'
]
var margin = {top: 5, right: 30, bottom: 35, left: 50},
width = 960 - margin.left - margin.right,
height = 150 - margin.top - margin.bottom;
var x = d3.scale.linear()
.domain([0, 24])
.range([0, width]);
var y = d3.scale.linear()
.domain([0, 140])
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.ticks(24)
.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", "x axis")
.append("text")
.attr("class", "axis-label")
.attr("y", height+35)
.attr("x", width/2-15)
.text('Horas');
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-20)
.text('Velocidad 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/3600); })
.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 i < 4 ? colors[i % colors.length] : 'none';
})
.attr("d", line);
svg.selectAll('.line')
.attr('stroke', function(d,i){
return i >= 4 ? colors[i % colors.length] : 'none';
});
function asd(a){
svg.selectAll('.line')
.attr('fill', function(d,i){
if (i==a || i>=4 ){
return 'none';
}
else if(i < 4){
return colors[i % colors.length];
}
})
}
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
</script>
</body>
</html>
1 个解决方案
解决方案1
1 已采纳 2016-01-14 09:35:12
要仅隐藏函数参数指示的一条路径，请执行以下操作：
function asd(a){
d3.select(svg.selectAll('.line')[0][a]).attr("fill", "none")
}
在这里svg.selectAll('.line')[0][a]将提供相关的隐藏路径。
这里的工作代码
如果在第二次单击时希望颜色重新显示在路径上，则可以执行以下操作：
function asd(a){
if(d3.select(svg.selectAll('.line')[0][a]).attr("fill") != "none")
d3.select(svg.selectAll('.line')[0][a]).attr("fill", "none");
else
d3.select(svg.selectAll('.line')[0][a]).attr("fill", colors[a % colors.length]);
}
这里的工作代码
隐藏和显示取决于价值
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.