隱藏/顯示價值圖表

我有一個問題隱藏和顯示填充和描邊的折線圖的值。隱藏/顯示價值圖表

我有這段代碼。如果我點擊第一個按鈕，它會隱藏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>

來源

2016-01-14 Sebas Bejenaru

什麼是錯誤的呢？ – Cyril

如果我點擊第一個按鈕我隱藏1的值，但如果我點擊第二個按鈕隱藏2的值，但我再次顯示1的值... –

隱藏只是一個由函數的放慢參數指定路徑這樣做：

function asd(a){ 
    d3.select(svg.selectAll('.line')[0][a]).attr("fill", "none") 
}

這裏svg.selectAll('.line')[0][a]會給隱藏關聯路徑。

工作代碼here

如果第二次點擊您想要的顏色回來的道路上，你可以這樣做：

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

}

工作代碼here

來源

2016-01-14 09:35:12 Cyril

是的！ thx教我如何做到這一點:) –

隱藏/顯示價值圖表

回答

相關問題