1
Добрый вечер StackOverflow,Обновление d3.js choropleth/таблицы комбо, используя HTML раскрывающийся список
Длинные читатель время, в первый раз спрашивать.
Мои ранние поиски взял меня к этому bl.ock http://bl.ocks.org/phil-pedruco/7557092
Очень здорово на самом деле. Итак, я взял этот код и пошел на работу. У меня это работает, как вы можете видеть на примере ниже.
Я поместил все в скрипку для вас. jsfiddle.net/Majomo/npya9khq/
Кроме того, я был предупрежден красным полем для отправки кода здесь. Сделал мое сообщение массивным, но красная коробка заставила меня сделать это и не ответила бы. Извините за стену текста.
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
};
})
};
До сих пор, это выглядит здорово, но сейчас я заблудился.
Как вы можете видеть, я создал раскрывающийся список html, который я хотел бы использовать для управления загрузкой набора данных. Я искал и нашел ответы, которые привели меня к этому моменту. У меня есть 3 csv-файла с разными данными, и я пытаюсь использовать раскрывающийся список, чтобы выбрать каждый из них. Ответы/веб-сайты, которые я изучал, все это посоветовали.
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
Моя проблема в том, что когда я пробовал это, я никуда не уходил. Я удалил его из моего кода выше, поскольку я даже не уверен, когда он принадлежит. Я очень беспокоюсь, что есть таблица и карта, и я не знаю, где можно работать.
Итак, со всем, что сказал, мне интересно, Этот метод возможен, чего я хочу достичь? Если нет, есть ли способ сделать это?
Благодарим вас за любое направление, которое вы могли бы предложить.