1
İyi akşamlar Stackoverflow,bir html açılan
Uzun zaman okuyucu, ilk kez soran kullanarak d3.js choropleth/masa açılan güncellenmesi.
Benim erken aramalar bu bl.ock Gerçekten çok serin http://bl.ocks.org/phil-pedruco/7557092
götürdü. Bu yüzden bu kodu aldım ve işe gittim. Aşağıdaki örnekte gördüğünüz gibi çalışıyorum.
Her şeyi bir kemanın içine yerleştirdim. jsfiddle.net/Majomo/npya9khq/
Ayrıca, kodu buraya göndermek için kırmızı bir kutu tarafından uyarıldım. Gömleğimi muazzam yaptı ama kırmızı kutu bana bunu yapmamı sağladı ve cevap vermeyecekti. Metnin duvarı için üzgünüm.
html
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.9.0/d3-legend.min.js"></script>
<body>
<!-- Table to hold the Divs -->
<table border="0" cellpadding="10" style="overflow-y: scroll;">
<tr>
<td>
<div id="table_container" class="csvTable"></div>
</td>
<td>
<div id="map_container"></div>
</td>
<td>
<div id="d3legend" class="legend"></div>
</td>
<td>
<div class="styled-select">
<select id="data_sources" name="data_sources">
<option value="regionalDistrictData.csv" selected>Census 1996 Data</option>
<option value="regionalDistrictData2.csv">Census 2001 Data</option>
<option value="regionalDistrictData3.csv">Census 2006</option>
</select>
</div>
</td>
</tr>
</table>
</html>
css
rect {
fill: none;
cursor: pointer;
}
.feature {
fill: #ccc;
cursor: pointer;
}
.mesh {
fill: none;
stroke: #fff;
stroke-width: .5px;
stroke-linejoin: round;
}
.csvTable table {
border-collapse: collapse;
text-align: left;
width: 100%;
}
.csvTable {
font: normal 12px/150% Arial, Helvetica, sans-serif;
background: #fff;
overflow: hidden;
border: 1px solid #069;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.csvTable table td,
.csvTable table th {
padding: 3px 10px;
}
.csvTable table thead th {
background: 0;
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#00557F');
background-color: #006D2C;
color: #FFF;
font-size: 15px;
font-weight: 700;
border-left: 1px solid #0070A8;
}
.csvTable table thead th:first-child {
border: none;
}
.csvTable table tbody td {
color: #00496B;
border-left: 1px solid #E1EEF4;
font-size: 12px;
border-bottom: 1px solid #E1EEF4;
font-weight: 400;
}
.csvTable table tbody td:first-child {
border-left: none;
}
.csvTable table tbody tr:last-child td {
border-bottom: none;
}
.csvTable tr:hover td {
background-color: #069;
color: white;
}
.styled-select select {
background: transparent;
font: normal 12px/150% Arial, Helvetica, sans-serif;
width: 268px;
padding: 5px;
font-size: 16px;
line-height: 1;
border: 0;
border-radius: 0;
height: 34px;
-webkit-appearance: none;
}
.styled-select {
width: 240px;
height: 34px;
padding: 5px;
overflow: hidden;
background: url(http://i62.tinypic.com/2e3ybe1.jpg) no-repeat right #ddd;
border: 1px solid #069;
}
js
// Based on http://public.johnnyotoole.fastmail.fm/county_map.html
// Based on http://bl.ocks.org/mbostock/4699541
//Width and height
var w = 600;
var h = 750;
var active;
var jsonOutside;
//Define map projection NB change to albers and changed zoom etc
var projection = d3.geo.albers()
.center([-3.5, 43.4])
.rotate([121, -11])
.scale(2400)
.translate([w/2, h/2]);
//Define path generator
var path = d3.geo.path()
.projection(projection);
//Create SVG element
var svg = d3.select("#map_container")
.append("svg")
.attr("width", w)
.attr("height", h);
// from colorbrewer (http://colorbrewer2.org/)
//var colours = ["#BAE4B3", "#74C476", "#31A354", "#006D2C"];
//var colours = ["#fef0d9", "#fdcc8a", "#fc8d59", "#d7301f"];
// setup colours for choropleth
var colScale = d3.scale.quantile()
.domain([1.2, 1.5, 2])
.range(['#edf8fb', '#b3cde3', '#8c96c6', '#8856a7', '#810f7c']);
var dropdown = d3.select("#data_sources")
var change = function() {
var source = dropdown.node().options[dropdown.node().selectedIndex].value;
d3.csv(source, function(csv) {
//continue doing stuff here.
})
}
dropdown.on("change", change)
change(); //trigger json on load
svg.append("rect")
.attr("width", w)
.attr("height", h)
.on("click", reset);
var g = svg.append("g");
//Load in CSV data
d3.csv(src = "https://gist.githubusercontent.com/majomo/2d5409622ff825ad932d/raw/5a37026b6c11d129a6eb1bcd32ef2a23d8833770/regDistBC.csv", function(data) {
//Load in GeoJSON data
d3.json(src = "https://gist.githubusercontent.com/majomo/1beba4e212d12f3d6e29/raw/1bd280591bc4959449505395c90f7ffdd2e2ddbd/bcGeo.json", function(json) {
// join csv data with json data and create
json.features.forEach(function(d, i) {
data.forEach(function(e, j) {
if (d.properties.CDNAME === e.Region) {
d.properties.value = +e.Result;
};
})
})
jsonOutside = json; // pass json to a global so tableRowClicked has access
var columns = ["Region", "Result"];
var table = d3.select("#table_container").append("table"),
thead = table.append("thead"),
tbody = table.append("tbody");
// append the header row
thead.append("tr")
.selectAll("th")
.data(columns)
.enter()
.append("th")
.text(function(column) {
return column;
});
// create a row for each object in the data
var rows = tbody.selectAll("tr")
.data(data)
.enter()
.append("tr");
// create a cell in each row for each column
var cells = rows.selectAll("td")
.data(function(row) {
return columns.map(function(column) {
return {
column: column,
value: row[column]
};
});
})
.enter()
.append("td")
.text(function(d) {
return d.value;
})
.on("click", function(d) {
tableRowClicked(d);
}); // added on click eventto td element NB you need to click on the cell with the conuty name
// add extents (max and min) from data results for choropleth
colScale.domain(d3.extent(data, function(d) {
return d.Result;
}));
//Bind data and create one path per GeoJSON feature
g.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", path)
.attr("class", "feature")
.attr("id", function(d) {
return d.properties.CDNAME;
}) // added id so click could work on id which is common between the json and csv data
.on("click", function(d) {
click(d);
})
.style("stroke", "gray")
.style("fill", function(d, i) {
return colScale(d.properties.value);
}); // fill based on colour scale
g.append("path")
.data(json.features)
.enter()
.append("path")
.attr("class", "mesh")
.attr("d", path);
});
});
function click(d) {
if (active === d) return reset();
g.selectAll(".active").classed("active", false);
d3.select("#" + d.properties.CDNAME).classed("active", active = d); // changed selection to id
var b = path.bounds(d);
g.transition().duration(750).attr("transform",
"translate(" + projection.translate() + ")" + "scale(" + .95/Math.max((b[1][0] - b[0][0])/w, (b[1][1] - b[0][1])/h) + ")" + "translate(" + -(b[1][0] + b[0][0])/2 + "," + -(b[1][1] + b[0][1])/2 + ")");
}
function reset() {
g.selectAll(".active").classed("active", active = false);
g.transition().duration(750).attr("transform", "");
}
function tableRowClicked(x) {
jsonOutside.features.forEach(function(d) { // loop through json data to match td entry
if (x.value === d.properties.CDNAME) {
var region = d;
click(d); // pass json element that matches td data to click
};
})
};
Şimdiye kadar, harika görünüyor ama şimdi kaybolmadan am
.Gördüğünüz gibi, hangi veri kümesinin yükleneceğini kontrol etmek için kullanmak istediğim bir html açılır menüsü oluşturdum. Beni bu noktaya getiren cevapları aradım ve buldum. Ben farklı veri ile 3 csv dosyaları var ve her birini seçmek için açılan menüyü kullanmaya çalışıyorum. Çalıştığım cevaplar/web siteleri bunun bir çeşitliliğini tavsiye etti.
var dropdown = d3.select("#data_sources")
var change = function() {
var source = dropdown.node().options[dropdown.node().selectedIndex].value;
d3.csv(source, function(csv) {
//continue doing stuff here.
})
}
dropdown.on("change", change)
change(); //trigger json on load
Sorunum, bunu denediğimde hiçbir yere ulaşamadım. Yukarıdaki kodumdan kaldırıldım çünkü artık ait olmadığından emin değilim. Benim büyük endişem, bir masa ve bir harita var ve ben işe nerede bilmiyorum.
Yani, bütün bunlarla birlikte, merak ediyorum, , elde etmek istediklerim için bu yöntem mi? Değilse, bunu yapmanın bir yolu var mı?
Sunduğunuz herhangi bir yön için şimdiden teşekkür ederiz.