1. дома
  2. Вопрос и ответ
  3. Как выделить кнопку при нажатии

Как выделить кнопку при нажатии

2016-08-24 4 views
0

У меня есть две карты и две кнопки для переключения между ними.Как выделить кнопку при нажатии

<div class="buttons"> 
    <button id="DIM1">Dimension_1</button> 
    <button id="DIM2">Dimension_2</button> 
</div

Я хочу выделить кнопку, относящуюся к выбранному набору данных. Также мне нужно сначала выделить первый, потому что первый набор данных отображается в начале.

Fiddle: https://jsfiddle.net/anton9ov/v72kLebe/

источник

2016-08-24 Anton

+0

Что вы имеете в виду под "изюминкой"? Должно ли это выглядеть так, как будто оно нажато? – Okazari

+0

Используйте радиокнопки вместо кнопок, поэтому вы можете соответствующим образом стилизовать их с помощью псевдокласса ': checked'. – LuudJacobs

+0

Я имею в виду другой стиль кнопки, когда он нажат – Anton

ответ

2

создать класс с именем «active_btn» в CSS файл добавить его к первой кнопке , когда кнопка нажата, удалить класс active_btn все другой кнопки, и добавить его к текущей кнопке.

См фрагмент кода, чтобы понять

var dataset = [681, 602, 613, 648, 654, 669, 688, 701, 697, 686, 684, 675, 742, 655, 662, 709, 709, 718, 739]; 
 
\t \t 
 
\t \t //Width and height 
 
\t \t var w = 620; 
 
\t \t var h = 320; 
 
\t \t var bottomPadding = 40; 
 
    var topPadding = 10; 
 
\t \t var barPadding = 5; 
 
\t \t var barWidth = d3.round(w/dataset.length); 
 

 
\t \t //Localize numbers, dates, currencies 
 
\t \t var ru_BY = { 
 
\t \t \t "decimal": ",", 
 
\t \t \t "thousands": "\xa0", 
 
\t \t \t "grouping": [3], 
 
\t \t \t "currency": ["", " Br"], 
 
\t \t \t "dateTime": "%A, %e %B %Y г. %X", 
 
\t \t \t "date": "%d.%m.%Y", 
 
\t \t \t "time": "%H:%M:%S", 
 
\t \t \t "periods": ["AM", "PM"], 
 
\t \t \t "days": ["воскресенье", "понедельник", "вторник", "среда", "четверг", "пятница", "суббота"], 
 
\t \t \t "shortDays": ["вс", "пн", "вт", "ср", "чт", "пт", "сб"], 
 
\t \t \t "months": ["Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь"], 
 
\t \t \t "shortMonths": ["янв", "фев", "мар", "апр", "май", "июн", "июл", "авг", "сен", "окт", "ноя", "дек"] 
 
\t \t }; 
 

 
\t \t //Store locale object 
 
\t \t var RU = d3.locale(ru_BY); 
 

 
\t \t //Create scale function for bar height 
 
\t \t var yScale = d3.scale.linear() 
 
\t \t \t \t \t \t \t .domain([0, d3.max(dataset)]) 
 
\t \t \t \t \t \t \t .rangeRound([bottomPadding, h - topPadding - bottomPadding]); 
 

 
\t \t //Define x axis 
 
\t \t var minDate = new Date(2014, 11, 1), 
 
\t \t \t maxDate = new Date(2016, 5, 1); 
 

 
\t \t var xScale = d3.time.scale() 
 
\t \t \t \t \t .domain([minDate, maxDate]) 
 
\t \t \t \t \t .range([(barWidth - barPadding)/2, barWidth * (dataset.length - 1) + (barWidth - barPadding)/2]); 
 

 
\t \t var xAxis = d3.svg.axis() 
 
\t \t \t \t \t \t .scale(xScale) 
 
\t \t \t \t \t \t .orient("bottom") 
 
       //Specify the frequency of ticks 
 
       .ticks(d3.time.months, 1) 
 
       //Specify size of ticks, by default 6 
 
       .tickSize(0) 
 
       .tickFormat(RU.timeFormat("%b %Y")); 
 
\t \t 
 
\t \t //Create SVG element 
 
\t \t var svg = d3.select("body") 
 
\t \t \t \t \t .append("svg") 
 
\t \t \t \t \t .attr("width", w) 
 
\t \t \t \t \t .attr("height", h); 
 
\t \t 
 
\t \t //Create rectangles 
 
\t \t svg.selectAll("rect") 
 
\t \t \t .data(dataset) 
 
\t \t \t .enter() 
 
\t \t \t .append("rect") 
 
\t \t \t .attr("x", function(d, i) { 
 
\t \t \t  \t return i * barWidth; 
 
\t \t \t }) 
 
\t \t \t .attr("y", function(d) { 
 
\t \t \t \t return h - yScale(d) - bottomPadding; 
 
\t \t \t }) 
 
\t \t \t .attr("width", barWidth - barPadding) 
 
\t \t \t .attr("height", function(d) { 
 
\t \t \t \t return yScale(d); 
 
\t \t \t }) 
 
\t \t \t .attr("fill", "red") 
 
     .on("mouseover", function(d, i) { 
 
     var tickDate = d3.select(d3.selectAll(".axis .tick text")[0][i]).data()[0]; 
 
     console.log (tickDate); 
 
     var formatDate = RU.timeFormat("%B %Y"); 
 
     var tooltipDate = formatDate(tickDate); 
 
     \t //Get this bar's x/y values, then augment for the tooltip 
 
     var xPosition = parseFloat(d3. select(this). attr("x")) + ((barWidth - barPadding)/2); 
 
     var yPosition = parseFloat(d3. select(this). attr("y"))/2 + h/2; 
 
     //Update the tooltip position and value 
 
     d3.select("#tooltip") 
 
     \t .style("left" , xPosition + "px") 
 
      .style("top" , yPosition + "px") 
 
      .select("#value") 
 
      .text(d + " Br"); 
 
\t \t \t \t d3.select("#tooltip") 
 
      .select("#label") 
 
      .text(tooltipDate); 
 
\t \t \t \t //Show the tooltip 
 
     d3.select("#tooltip"). 
 
     \t classed("hidden" , false); 
 
\t \t \t \t d3.select(this) 
 
     \t .attr("fill", "orange"); 
 
     }) 
 
     .on("mouseout", function(d) { 
 
     \t //Hide the tooltip 
 
\t \t \t \t d3.select("#tooltip") 
 
     \t .classed("hidden" , true); 
 
     \t d3.select(this) 
 
     \t .transition() 
 
      .duration(150) 
 
     \t .attr("fill", "red"); 
 
     }); 
 

 
\t \t //Create text 
 
\t \t svg.selectAll("text") 
 
\t \t \t .data(dataset) 
 
\t \t \t .enter() 
 
\t \t \t .append("text") 
 
\t \t \t .text(function(d) { 
 
\t \t \t \t return d; 
 
\t \t \t }) 
 
\t \t \t .attr("text-anchor", "middle") 
 
\t \t \t .attr("x", function(d, i) { 
 
\t \t \t  \t return i * barWidth + (barWidth - barPadding)/2; 
 
\t \t \t }) 
 
\t \t \t .attr("y", function(d) { 
 
\t \t \t \t return h - yScale(d) + 14 - bottomPadding; 
 
\t \t \t }) 
 
\t \t \t .attr("font-family", "sans-serif") 
 
\t \t \t .attr("font-size", "11px") 
 
\t \t \t .attr("fill", "white") 
 
     .style("pointer-events", "none"); 
 

 
\t \t //Add x axis 
 
\t \t svg.append("g") 
 
\t \t .attr("class", "axis") 
 
\t \t .attr("transform", "translate(0," + (h - bottomPadding) + ")") 
 
\t \t .call(xAxis) 
 
     .selectAll(".tick text") 
 
     .call(wrap, 40); 
 
     
 
    function wrap(text, width) { 
 
    \t text.each(function() { 
 
     \t var text = d3.select(this), 
 
     words = text.text().split(/\s+/).reverse(), 
 
     word, 
 
     line = [], 
 
     lineNumber = 0, 
 
     lineHeight = 1.1, 
 
     y = text.attr("y"), 
 
     dy = parseFloat(text.attr("dy")), 
 
     tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em"); 
 
    while (word = words.pop()) { 
 
     line.push(word); 
 
     tspan.text(line.join(" ")); 
 
     if (tspan.node().getComputedTextLength() > width) { 
 
     line.pop(); 
 
     tspan.text(line.join(" ")); 
 
     line = [word]; 
 
     tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word); 
 
     } 
 
    } 
 
    }); 
 
} 
 

 
function transition(dataset, dimension) { 
 
\t //Update scale domain 
 
    yScale.domain([0, d3.max(dataset)]); 
 
    //Update all rects 
 
    svg.selectAll("rect") 
 
    .data(dataset) 
 
    .transition(150) 
 
    .attr("y", function(d) { 
 
     \t \t return h - yScale(d) - bottomPadding; 
 
    }) 
 
    .attr("height", function(d) { 
 
     \t \t return yScale(d); 
 
    }) 
 
    .attr("fill", function(d, i) { 
 
     \t \t return dimension === " DIM1" ? "red" : "blue"; 
 
    }); 
 
    svg.selectAll("rect") 
 
    .on("mouseover", function(d, i) { 
 
     \t \t var tickDate = d3.select(d3.selectAll(".axis .tick text")[0][i]).data()[0]; 
 
     var formatDate = RU.timeFormat("%B %Y"); 
 
     var tooltipDate = formatDate(tickDate); 
 
     \t //Get this bar's x/y values, then augment for the tooltip 
 
     var xPosition = parseFloat(d3. select(this). attr("x")) + ((barWidth - barPadding)/2); 
 
     var yPosition = parseFloat(d3. select(this). attr("y"))/2 + h/2; 
 
     //Update the tooltip position and value 
 
     d3.select("#tooltip") 
 
     \t .style("left" , xPosition + "px") 
 
      .style("top" , yPosition + "px") 
 
      .select("#value") 
 
      .text(d + dimension);   
 
\t \t \t \t d3.select("#tooltip") 
 
      .select("#label") 
 
      .text(tooltipDate); 
 
\t \t \t \t //Show the tooltip 
 
     d3.select("#tooltip") 
 
      .classed("hidden" , false); 
 
\t \t \t \t d3.select(this) 
 
     \t .attr("fill", "orange"); 
 
    }) 
 
    .on("mouseout", function(d) { 
 
     \t //Hide the tooltip 
 
\t \t \t \t d3.select("#tooltip") 
 
     \t .classed("hidden" , true); 
 
     \t d3.select(this) 
 
     \t .transition() 
 
      .duration(150) 
 
     \t .attr("fill", function(d, i) { return dimension === " DIM1" ? "red" : "blue"; }); 
 
     }); 
 
    //Update all labels 
 
\t svg.selectAll("text") 
 
\t \t .data(dataset) 
 
    .transition(150) 
 
\t \t .text(function(d) { 
 
\t \t \t \t return d; 
 
\t \t }) 
 
\t \t .attr("x", function(d, i) { 
 
\t \t \t \t return i * barWidth + (barWidth - barPadding)/2; 
 
\t \t }) 
 
\t \t .attr("y", function(d) { 
 
\t \t \t \t return h - yScale(d) + 14 - bottomPadding; 
 
\t \t }); 
 
} 
 

 
d3.select("#DIM1") 
 
    .on("click", function() { 
 
     //New values for dataset 
 
     var dataset = [681, 602, 613, 648, 654, 669, 688, 701, 697, 686, 684, 675, 742, 655, 662, 709, 709, 718, 739]; 
 
     transition(dataset, " DIM1") 
 
    }); 
 
     
 
d3.select("#DIM2") 
 
    .on("click", function() { 
 
     //New values for dataset 
 
     var dataset = [619, 412, 408, 438, 463, 474, 449, 458, 415, 389, 409, 379, 412, 345, 307, 343, 361, 369, 371]; 
 
     transition(dataset, " DIM2") 
 
    }); 
 
     
 
$('.hightlight_btn').click(function(){ 
 
\t $('.hightlight_btn').removeClass('active_btn'); 
 
\t $(this).addClass('active_btn'); 
 
});
.axis path, 
 
\t \t \t .axis line { 
 
\t \t \t \t fill: none; 
 
\t \t \t \t /* stroke: black; */ 
 
\t \t \t \t shape-rendering: crispEdges; 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t .axis text { 
 
\t \t \t \t font-family: sans-serif; 
 
\t \t \t \t font-size: 11px; 
 
\t \t \t } 
 
     
 
     #tooltip { 
 
\t \t \t \t position: absolute; 
 
\t \t \t \t width: auto; 
 
\t \t \t \t height: auto; 
 
\t \t \t \t padding: 10px; 
 
\t \t \t \t background-color: white; 
 
\t \t \t \t -webkit-border-radius: 10px; 
 
\t \t \t \t -moz-border-radius: 10px; 
 
\t \t \t \t border-radius: 10px; 
 
\t \t \t \t -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4); 
 
\t \t \t \t -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4); 
 
\t \t \t \t box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4); 
 
\t \t \t \t pointer-events: none; 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t #tooltip.hidden { 
 
\t \t \t \t display: none; 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t #tooltip p { 
 
\t \t \t \t margin: 0; 
 
\t \t \t \t font-family: sans-serif; 
 
\t \t \t \t font-size: 16px; 
 
\t \t \t \t line-height: 20px; 
 
\t \t \t } 
 
     
 
     .buttons { 
 
     text-align: center; 
 
     width: 620px; 
 
     } 
 
     
 
     .active_btn { 
 
     background-color: red; 
 
     }
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script> 
 

 

 
<div id="tooltip" class="hidden"> 
 
    <p><strong><span id="label">month</span></strong></p> 
 
    <p><span id="value">100</span></p> 
 
</div> 
 
<div class="buttons"> 
 
    <button id="DIM1" class="hightlight_btn active_btn">Dimension_1</button> 
 
    <button id="DIM2" class="hightlight_btn">Dimension_2</button> 
 
</div>

источник

2016-08-24 08:28:21

1

Вы, вероятно, следует переключить класс на кнопках, когда они щелкают. Что-то вроде этого:

.buttons .active { 
    background: red; 
}

(Вы бы, конечно, стиль это надлежащим образом, не только делает его красный ...)

А потом что-то вроде этого, если у вас есть доступ к Jquery:

d3.select("#DIM1") 
.on("click", function() { 

    $('.buttons button').removeClass('active'); 
    $(this).addClass('active'); 

    //New values for dataset 
    var dataset = [681, 602, 613, 648, 654, 669, 688, 701, 697, 686, 684, 675, 742, 655, 662, 709, 709, 718, 739]; 
    transition(dataset, " DIM1") 
}); 

d3.select("#DIM2") 
    .on("click", function() { 

    $('.buttons button').removeClass('active'); 
     $(this).addClass('active'); 

     //New values for dataset 
     var dataset = [619, 412, 408, 438, 463, 474, 449, 458, 415, 389, 409, 379, 412, 345, 307, 343, 361, 369, 371]; 
     transition(dataset, " DIM2") 
    });

Если вы не хотите использовать JQuery вот d3.js подход:

d3.select("#DIM1") 
.on("click", function() { 
    d3.select("#DIM1").attr('class', 'active'); 
    d3.select("#DIM2").attr('class', ''); 
    //New values for dataset 
    var dataset = [681, 602, 613, 648, 654, 669, 688, 701, 697, 686, 684, 675, 742, 655, 662, 709, 709, 718, 739]; 
    transition(dataset, " DIM1") 
}); 

d3.select("#DIM2") 
    .on("click", function() { 
     d3.select("#DIM2").attr('class', 'active'); 
     d3.select("#DIM1").attr('class', ''); 
     //New values for dataset 
     var dataset = [619, 412, 408, 438, 463, 474, 449, 458, 415, 389, 409, 379, 412, 345, 307, 343, 361, 369, 371]; 
     transition(dataset, " DIM2") 
    });

источник

2016-08-24 08:25:28 Robban

2

Я модифицировал Нижняя часть вашего сценария:

d3.select("#DIM1") 
    .on("click", function() { 
     //New values for dataset 
     var dataset = [681, 602, 613, 648, 654, 669, 688, 701, 697, 686, 684, 675, 742, 655, 662, 709, 709, 718, 739]; 

     d3.select('#DIM2').style('background-color', 'initial'); 
     d3.select(this).style('background-color', '#99ccee'); 

     transition(dataset, " DIM1") 
    }); 

d3.select("#DIM2") 
    .on("click", function() { 
     //New values for dataset 
     var dataset = [619, 412, 408, 438, 463, 474, 449, 458, 415, 389, 409, 379, 412, 345, 307, 343, 361, 369, 371]; 

     d3.select('#DIM1').style('background-color', 'initial'); 
     d3.select(this).style('background-color', '#99ccee'); 

     transition(dataset, " DIM2") 
    });

В «Клик» событие я просто нажать кнопку и установить свойство цвета фона, а затем выбрать другую кнопку и сбросить свойство цвета фона.

источник

2016-08-24 08:26:42

Смежные вопросы

 Смежные вопросы