D3 filtern von Daten Punkte
Ich bin Implementierung die klassische mercator-Beispiel (https://github.com/mbostock/d3/blob/master/examples/mercator/mercator.html), die ich geändert habe, um zoom-in Afghanistan ist und nur eine benutzerdefinierte Schieberegler. Ich lese im GeoJSON-Daten von Orten, wo die Explosionen stattgefunden haben und die Grafik Karten Sie auf laden. Ich will verwenden Sie den Schieberegler, um die Ansicht nur ein Monat der explosion Punkte zu einer Zeit, aber ich habe Probleme bei der Filterung der Ergebnisse. Ich habe versucht, mehrere Dinge auf Grundlage der Beiträge in der Google-Gruppe, aber nicht, um zu verstehen, wie das filtern der gelesenen Daten in den bisher von 'Explosionen.json'. Vielen Dank für die Hilfe!
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>IED Attacks in Afghanistan (2004-2009)</title>
<script type="text/javascript" src="../d3.v2.js"></script>
<script type="text/javascript" src="../lib/jquery/jquery.min.js"></script>
<script type="text/javascript" src="../lib/jquery-ui/jquery-ui.min.js"></script>
<style type="text/css">
@import url("../lib/jquery-ui/jquery-ui.css");
body, .ui-widget {
font: 14px Helvetica Neue;
}
svg {
width: 960px;
height: 600px;
border: solid 1px #ccc;
background: #eee;
}
line {
stroke: brown;
stroke-dasharray: 4,2;
}
path {
fill: #ccc;
stroke: #fff;
}
div {
width: 960px;
}
</style>
</head>
<body>
<h3>IED Attacks in Afghanistan (2004-2009)</h3>
<script type="text/javascript">
//Create the Mercator Projection (Map)
var xy = d3.geo.mercator(),
path = d3.geo.path().projection(xy);
//Create the states variable
var states = d3.select("body")
.append("svg")
.append("g")
.attr("id", "states");
//Create the equator variable
var equator = d3.select("svg")
.append("line")
.attr("x1", "0%")
.attr("x2", "100%");
//Create the explosions variable
var explosions = d3.select("svg")
.append("g")
.attr("id","explosions");
//Load in the states & equator data from the file 'world-countries.json'
d3.json("world-countries.json", function(collection) {
states
.selectAll("path")
.data(collection.features)
.enter().append("path")
.attr("d", path)
.append("title")
.text(function(d) { return d.properties.name; });
equator
.attr("y1", xy([0, 0])[1])
.attr("y2", xy([0, 0])[1]);
});
//the variable that holds our translate, center on Afghanistan
var translate = xy.translate(); //create translation to center gride in different area
translate[0] = -1741;
translate[1] = 1487;
xy.translate(translate); //center
xy.scale(12000); //zoom in
//Load in the explosions data from the file 'explosions.json'
d3.json("explosions.json", function(collection) {
explosions
.selectAll("path") //make a path and attach data
.data(collection.features)
.enter().append("path")
.attr("d", path)
.style("stroke","red") //color the path points
.style("stroke-width",2) //size of point stroke
.attr("class","explosionpoint")
.append("title") //title is the 'name' field in the json file
.text(function(d) { return d.properties.name; });
});
</script>
<p></p>
<!-- Slider -->
<div id="scale"></div><p></p>
<script type="text/javascript">
$("#scale").slider({
min: 20040101, //min : 1/1/04
max: 20100101, //max: 1/1/10
value: 20060601, //default slider value
step: 100, //step is the allow increments the slider can move. 100 = one month
slide: function(event, ui) {
/* REMOVE ALL EXPLOSION PATHS EXCEPT FOR A PARTICULAR MONTH OR RELOAD WITH FILTERED RESULTS */
}
});
</script>
InformationsquelleAutor user1245530 | 2012-08-29
Du musst angemeldet sein, um einen Kommentar abzugeben.
Müssen Sie die post einen Teil oder alle Ihre Explosionen.json-Objekt für eine konkrete Antwort. Allerdings, so etwas auszufiltern, die einen JSON-wenn Sie aufgebaut ist, wie
{explosion1:{data1:true, data2:true}, explosion2:{data1:true, data2:false}}
:(z.B.
filterJSON(myjson, "data1", true)
geben alle Explosionen mit data1:true)Dies ist nicht spezifisch für d3.
Dann könnten Sie so etwas wie dies für die d3-Seite der Dinge:
Wenn ich verstehe deine Anwendung würde es eigentlich besser sein, wechseln Sie einfach die
visiblity
- Attribut des SVG-elements.InformationsquelleAutor ZachB
D3 hat eine sehr Natürliche Art und Weise, dies zu tun. Ich nehme an, Ihre Daten wie folgt aussieht:
...und, hast du noch ein paar Variablen, wir nennen es
explosionsData
Bezug zu den Daten.Können Sie dann zeichnen Sie Ihre Explosionen mit einer Funktion, die Werte aus dem regler. Finden Sie die
.filter
habe ich unten Hinzugefügt.Nur diese Funktion aufrufen, wenn Ihr die Werte des Reglers ändert.
InformationsquelleAutor ACPrice