我有两个图表和两个按钮可在它们之间切换。
<div class="buttons">
<button id="DIM1">Dimension_1</button>
<button id="DIM2">Dimension_2</button>
</div
我想突出显示与所选数据集相关的按钮。另外，我首先需要突出显示第一个数据集，因为第一个数据集显示在开头。
创建一个名为“ 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];
//Width and height
var w = 620;
var h = 320;
var bottomPadding = 40;
var topPadding = 10;
var barPadding = 5;
var barWidth = d3.round(w / dataset.length);
//Localize numbers, dates, currencies
var ru_BY = {
"decimal": ",",
"thousands": "\xa0",
"grouping": [3],
"currency": ["", " Br"],
"dateTime": "%A, %e %B %Y г. %X",
"date": "%d.%m.%Y",
"time": "%H:%M:%S",
"periods": ["AM", "PM"],
"days": ["воскресенье", "понедельник", "вторник", "среда", "четверг", "пятница", "суббота"],
"shortDays": ["вс", "пн", "вт", "ср", "чт", "пт", "сб"],
"months": ["Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь"],
"shortMonths": ["янв", "фев", "мар", "апр", "май", "июн", "июл", "авг", "сен", "окт", "ноя", "дек"]
};
//Store locale object
var RU = d3.locale(ru_BY);
//Create scale function for bar height
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset)])
.rangeRound([bottomPadding, h - topPadding - bottomPadding]);
//Define x axis
var minDate = new Date(2014, 11, 1),
maxDate = new Date(2016, 5, 1);
var xScale = d3.time.scale()
.domain([minDate, maxDate])
.range([(barWidth - barPadding) / 2, barWidth * (dataset.length - 1) + (barWidth - barPadding) / 2]);
var xAxis = d3.svg.axis()
.scale(xScale)
.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"));
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Create rectangles
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) {
return i * barWidth;
})
.attr("y", function(d) {
return h - yScale(d) - bottomPadding;
})
.attr("width", barWidth - barPadding)
.attr("height", function(d) {
return yScale(d);
})
.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);
//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" )
.style("left" , xPosition + "px")
.style("top" , yPosition + "px")
.select("#value")
.text(d + " Br");
d3.select("#tooltip" )
.select("#label")
.text(tooltipDate);
//Show the tooltip
d3.select("#tooltip" ).
classed("hidden" , false);
d3.select(this)
.attr("fill", "orange");
})
.on("mouseout", function(d) {
//Hide the tooltip
d3.select("#tooltip")
.classed("hidden" , true);
d3.select(this)
.transition()
.duration(150)
.attr("fill", "red");
});
//Create text
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {
return d;
})
.attr("text-anchor", "middle")
.attr("x", function(d, i) {
return i * barWidth + (barWidth - barPadding) / 2;
})
.attr("y", function(d) {
return h - yScale(d) + 14 - bottomPadding;
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "white")
.style("pointer-events", "none");
//Add x axis
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + (h - bottomPadding) + ")")
.call(xAxis)
.selectAll(".tick text")
.call(wrap, 40);
function wrap(text, width) {
text.each(function() {
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) {
//Update scale domain
yScale.domain([0, d3.max(dataset)]);
//Update all rects
svg.selectAll("rect")
.data(dataset)
.transition(150)
.attr("y", function(d) {
return h - yScale(d) - bottomPadding;
})
.attr("height", function(d) {
return yScale(d);
})
.attr("fill", function(d, i) {
return dimension === " DIM1" ? "red" : "blue";
});
svg.selectAll("rect")
.on("mouseover", function(d, i) {
var tickDate = d3.select(d3.selectAll(".axis .tick text")[0][i]).data()[0];
var formatDate = RU.timeFormat("%B %Y");
var tooltipDate = formatDate(tickDate);
//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" )
.style("left" , xPosition + "px")
.style("top" , yPosition + "px")
.select("#value")
.text(d + dimension);
d3.select("#tooltip" )
.select("#label")
.text(tooltipDate);
//Show the tooltip
d3.select("#tooltip" )
.classed("hidden" , false);
d3.select(this)
.attr("fill", "orange");
})
.on("mouseout", function(d) {
//Hide the tooltip
d3.select("#tooltip")
.classed("hidden" , true);
d3.select(this)
.transition()
.duration(150)
.attr("fill", function(d, i) { return dimension === " DIM1" ? "red" : "blue"; } );
});
//Update all labels
svg.selectAll("text")
.data(dataset)
.transition(150)
.text(function(d) {
return d;
})
.attr("x", function(d, i) {
return i * barWidth + (barWidth - barPadding) / 2;
})
.attr("y", function(d) {
return h - yScale(d) + 14 - bottomPadding;
});
}
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(){
$('.hightlight_btn').removeClass('active_btn');
$(this).addClass('active_btn');
});.axis path,
.axis line {
fill: none;
/* stroke: black; */
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
#tooltip {
position: absolute;
width: auto;
height: auto;
padding: 10px;
background-color: white;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
pointer-events: none;
}
#tooltip.hidden {
display: none;
}
#tooltip p {
margin: 0;
font-family: sans-serif;
font-size: 16px;
line-height: 20px;
}
.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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句