How to rerender after a filter()
Fabrício Tavares
wimdows
But this works:
<!DOCTYPE html>
<html>
<head>
<title>Circles</title>
<meta name="Author" content="wimdows (wim)">
<script type="text/javascript" src="../../D3/d3.js"></script>
</head>
<body>
<div id="knoppies">
<button type="button" class="buttons" id="makered"
onmouseover="makeRedorBlue('red')" value="makethemred">make ´m red</
button>
<button type="button" class="buttons" id="makeblue"
onmouseover="makeRedorBlue('blue')" value="makethemblue">make 'm blue</
button>
<button type="button" class="buttons" id="hidered"
onmouseover="hideRedsorBlues('red')" value="hidered">hide red</button>
<button type="button" class="buttons" id="hideblue"
onmouseover="hideRedsorBlues('blue')" value="hideblue">hide blue</
button>
<button type="button" class="buttons" id="makeoriginal"
onmouseover="returntoOriginalState()" value="makethemoriginal">make ´m
original</button>
<button type="button" class="buttons" id="showall"
onmouseover="showAll()" value="showall">show all</button>
</div>
<script type="text/javascript">
var data = [ {"color": "blue", "size": 5},
{"color": "blue", "size": 10},
{"color": "blue", "size": 15},
{"color": "red", "size": 3},
{"color": "red", "size": 2},
{"color": "red", "size": 13}];
var w = 600,
h = 300;
var vis = d3.select("body")
.append("svg:svg")
.attr("width", w)
.attr("height", h);
var circle = vis.selectAll("circle")
.data(data)
.enter().append("svg:circle")
.attr("cx", function(d) { return d.size*4; })
.attr("cy", function(d, i) { return i * 10 + 100; })
.attr("r", function(d) { return d.size; })
.style("fill", function(d) { return d.color; })
.attr("opacity", .5) ;
function makeRedorBlue(z) {
vis.selectAll(".my_balls")
.style("fill", z);
}
function hideRedsorBlues(z) {
vis.selectAll("circle")
.filter(function(d) { return d.color === z; })
.attr("display", "none");
}
function returntoOriginalState() {
vis.selectAll(".my_balls")
.data(data)
.style("fill", function(d) { return d.color; })
}
function showAll() {
vis.selectAll("circle")
.attr("display", "yes");
}
</script>
</body>
Mike Bostock
You should listen for the "change" event on checkboxes, rather than
"click". It's possible to toggle a checkbox without clicking, say by
focusing it using the tab key and hitting return. (Though some
browsers, including Chrome, map this to click anyway. So it's not
critical, but still a good practice.)
When you receive the "change" event, you can then inspect the state of
the checkbox by looking at `this.checked`. When the event handler is
called, `this` is the element that received the event—an input element
of type "checkbox". The `checked` property is a boolean that says
whether or not the checkbox is checked:
http://www.w3.org/TR/html5/the-input-element.html#attr-input-checked
You use this boolean to determine the appropriate value of the
"display" style, which should be "none" for hidden circles and null
(the default) for visible circles. I like using JavaScript's question
mark (ternary) operator for this purpose.
Your logic needs a bit of tweaking if you want the blue checkbox to
cause only blue circles to be visible: you need to make sure that if
the blue circles were hidden previously, they become visible. Radio
buttons make more sense in this case, because the inputs are
exclusive: you can't show *only* blue and *only* red at the same time.
So, if you had:
<input id="blue" type="radio" name="color" value="blue">
<label for="blue">Blue</label>
<input id="red" type="radio" name="color" value="red">
<label for="red">Red</label>
<input id="both" type="radio" name="color" value="both">
<label for="both">Both</label>
Then you might say:
d3.selectAll("input[name=color]").on("change", colorchange);
Where:
function colorchange() {
var color = this.value;
vis.selectAll(".ball")
.style("display", function(d) { return d.color == color ? null
: "none"; });
}
Note that I capture the `this.value` in a local variable so that it's
accessible from within the style function.
Alternatively, you could keep the checkboxes, but have them both
checked by default and have them control the visibility of their own
color independently. (But, it's then possible to uncheck both and hide
everything.)
function toggleBlue() {
vis.selectAll(".ball")
.filter(function(d) { return d.color == "blue"; })
.style("display", this.checked ? null : "none");
}
Mike
Fabrício Tavares
wimdows
that bit of code though. Hope it's of use to someone else then.
wimdows
would be handy to make a selection based on an attribute. As is
suggested i one of the threads in these groups. So I tried things like
vis.selectAll(["fill=red"]).
But that doesn't seem to work.
Am I wrong in thinking I can make these kinds of selections? Or did I
get the syntax wrong?
Regards,
wim
Ralph Lindenfeld
I'm trying to do something similar, but rather than restyle, I want to eliminate nodes based on an attribute.
I'm working off a variant of:
http://mbostock.github.com/d3/talk/20111018/tree.html
And using an attribute:
.filter(function(d) {return d.name != "Retain";}
sprinkled around the code I can get the node to "disappear" along with the text, but the connecting lines are still there.
I suppose it would probably be best to go back and filter the data before it even gets to that point?
Thanks,
RL