Переупорядочивание и статистическая раскраска в параллельных координатах в D3.js
Я работаю с этим примером параллельных координат. Я пытаюсь реализовать чистку, перерисовку и статистическую окраску в одной визуализации. Статистическая раскраска, кажется, не работает, и варианты чистки исчезают. Он выделяет ось веса, но цвет не меняется. Код является:
<!doctype html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
</head>
<title>Brushing Example</title>
<link rel="stylesheet" type="text/css" href="../d3.parcoords.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="lib/d3.js"></script>
<script src="lib/d3.svg.multibrush.js"></script>
<script src="../d3.parcoords.js"></script>
<div id="example" class="parcoords" style="width:960px;height:200px;"></div>
<p>
<label for="sltBrushMode">Brush mode:</label>
<select id="sltBrushMode">
</select>
<label id="lblPredicate" for="sltPredicate">Predicate:</label>
<select id="sltPredicate">
<option>AND</option>
<option>OR</option>
</select>
<button id="btnReset">Reset Brushes</button>
</p>
<p id="pStrums" style="visibility: hidden;">Strumming is a 2D selection brushing method, also called pinches by Alfred Inselberg.
You start a strum be clicking and dragging within one of the segments (area between two axes).
After releasing the mouse button, the selection will contain all lines that pass through all of the active strums.
<script>
// color scale for zscores
var zcolorscale = d3.scale.linear()
.domain([-2,-0.5,0.5,2])
.range(["brown", "#999", "#999", "steelblue"])
.interpolate(d3.interpolateLab);
// load csv file and create the chart
d3.csv('data/cars.csv', function(data) {
parcoords = d3.parcoords()("#example")
.data(data)
.hideAxis(["name"])
.composite("darker")
.render()
.alpha(0.4)
.shadows()
.reorderable()
.brushMode("1D-axes") // enable brushing
change_color("weight (lb)");
// click label to activate coloring
parcoords.svg.selectAll(".dimension")
.on("click", change_color)
.selectAll(".label")
.style("font-size", "14px");
});
// update color
function change_color(dimension) {
parcoords.svg.selectAll(".dimension")
.style("font-weight", "normal")
.filter(function(d) { return d == dimension; })
.style("font-weight", "bold")
parcoords.color(zcolor(parcoords.data(),dimension)).render()
}
// return color function based on plot and dimension
function zcolor(col, dimension) {
var z = zscore(_(col).pluck(dimension).map(parseFloat))
return function(d) { return zcolorscale(z(d[dimension])) }
};
// color by zscore
function zscore(col) {
var n = col.length,
mean = _(col).mean(),
sigma = _(col).stdDeviation();
return function(d) {
return (d-mean)/sigma;
};
};
var sltBrushMode = d3.select('#sltBrushMode')
sltBrushMode.selectAll('option')
.data(parcoords.brushModes())
.enter()
.append('option')
.text(function(d) { return d; });
sltBrushMode.on('change', function() {
parcoords.brushMode(this.value);
switch(this.value) {
case 'None':
d3.select("#pStrums").style("visibility", "hidden");
d3.select("#lblPredicate").style("visibility", "hidden");
d3.select("#sltPredicate").style("visibility", "hidden");
d3.select("#btnReset").style("visibility", "hidden");
break;
case '2D-strums':
d3.select("#pStrums").style("visibility", "visible");
break;
default:
d3.select("#pStrums").style("visibility", "hidden");
d3.select("#lblPredicate").style("visibility", "visible");
d3.select("#sltPredicate").style("visibility", "visible");
d3.select("#btnReset").style("visibility", "visible");
break;
}
});
sltBrushMode.property('value', '1D-axes');
d3.select('#btnReset').on('click', function() {parcoords.brushReset();})
d3.select('#sltPredicate').on('change', function() {
parcoords.brushPredicate(this.value);
});
</script>