隐藏/显示值图表

Hide/Show value chart

本文关键字：显示 隐藏      更新时间：2023-09-26

我在隐藏和显示带有填充和描边的折线图中的值时遇到问题。

我有这个代码。如果我单击第一个按钮，它会隐藏 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>

为了仅隐藏函数参数指示的一条路径，请执行以下操作：

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]);
}

此处的工作代码

相关文章：