muszę liczyć najdłuższą passę niebieskie paski do paska jesteśmy najechaniu na wykres słupkowy uzyskanych za pomocą kodu poniżej: 
Zliczanie ciągłych niebieskie paski do baru najechania
Na przykład Jeśli najeżdżam na pierwszy pasek (który jest czerwony) to najdłuższa smuga powinna pokazywać 0, drugie najeżdżanie (które również jest czerwone) również 0. Gdy wisiał na trzecim pasku, który jest niebieski, powinien pokazywać 1. i dopóki nie zawisimy na pasku liczby 18 powinien pokazywać Longest Streak jako 2. Od 20 lat, gdy jest więcej niż dwa kolejne słupki bluesowe, mówi 3. Nawet jeśli umieściłem kursor na pasku nr 21, powinien on nadal pokazywać Najdłuższą pasję jako 3. i powinien pokazywać, że aż cztery lub więcej niebieskich pasków pojawi się kolejno.
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.bar {
fill: orange;
}
.bar:hover {
fill: cyan ;
}
.x.axis path {
display: none;
}
.grid .tick {
stroke: lightgrey;
opacity: 0.7;
}
.grid path {
stroke-width: 0;
}
.d3-tip {
line-height: 1;
font-weight: bold;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: cyan;
border-radius: 2px;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: rgba(0, 0, 0, 0.8);
content: "\25BC";
position: absolute;
text-align: center;
}
/* Style northward tooltips differently */
.d3-tip.n:after {
margin: -1px 0 0 0;
top: 100%;
left: 0;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<script>
var margin = {top: 40, right: 20, bottom: 50, left: 70},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var formatPercent = d3.format(".0%");
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .5);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
//.tickFormat(formatPercent);
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
return "<strong>Time Used:</strong> <span style='color:cyan'>" + d.frequency + "</span>" + "<br/>" + "<strong>Longest Streak:</strong> <span>" + (d.criteria.match(/lightblue/g) || []).length+"</span>";
})
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.call(tip);
function make_y_axis() {
return d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10)
}
d3.tsv("pass_fail_bars_data.tsv", type, function (error, data) {
x.domain(data.map(function(d) { return d.problem_number; }));
y.domain([0, d3.max(data, function(d) { return d.frequency; })]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("x", -height/3)
.attr("y", -50)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Time Used (Seconds)");
svg.append("g")
.attr("class", "grid")
.call(make_y_axis()
.tickSize(-width, 0, 0)
.tickFormat("")
)
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("transform", "rotate(0)")
.attr("x", width/2)
.attr("y", 40)
.attr("dx", "1em")
.style("text-anchor", "middle")
.text("Problem #")
.attr("fill", "blue");
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function (d) { return x(d.problem_number); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.frequency); })
.attr("height", function (d) { return height - y(d.frequency); })
.style("fill", function(d) { return d.criteria; })
.on('mouseover', tip.show)
.on('mouseout', tip.hide)
});
function type(d) {
d.frequency = +d.frequency;
return d;
}
</script>
Obecnie to pokazuje tylko bieżącą niebieski licznik bar. Oznacza to, że gdy najeżdżam na niebieski pasek, liczę tylko ten pasek i wyświetlam najdłuższą smugę jako 1. Która w tym przypadku jest prawdziwa, ale gdy umieściłem kursor na pasku nr 20, to również wyświetla "najdłuższą serię" jako 1, gdy powinna wyświetlać jako 3.
Wszelkie sugestie Jak mogę zmodyfikować ten kod, aby uzyskać pożądany wynik?
Oto dane używam „pass_fail_bars_data.tsv”
problem_number frequency criteria
1 08167 "red"
2 01492 "red"
3 02780 "lightblue"
4 04253 "red"
5 12702 "red"
6 02288 "lightblue"
7 02022 "red"
8 06094 "red"
9 06973 "lightblue"
10 00153 "lightblue"
11 00747 "red"
12 04025 "red"
13 02517 "lightblue"
14 06749 "red"
15 07507 "lightblue"
16 01929 "red"
17 00098 "red"
18 05987 "lightblue"
19 06333 "lightblue"
20 09056 "lightblue"
21 02758 "red"
22 01037 "lightblue"
23 02465 "lightblue"
24 00150 "red"
25 01971 "lightblue"
26 00074 "lightblue"
najdłuższa passa @ 13..15 18 powinno być wszystko wynosić 2, ponieważ nie jest smuga 2 w 9 i 10 .... is'nt to prawidłowe – Cyril
tak zgadzam się, przepraszam za pomyłkę – Artiga