У меня есть этот geojson, собирающий значения, которые мне нужно показать (субиндекс_1 и т. д.), и геоданные.
{"type": "FeatureCollection","features": [{ "type": "Feature", "id": 0, "properties": { "OBJECTID": 1454, "STAT_LEVL_": 2, "NUTS_ID": "AT11", "SHAPE_Leng": 6.10844425190757, "SHAPE_Area": 0.471234982131153, "subindex_1": 0.196981355, "categories": 4.0, "subindex_2": 0.414249207, "categori_1": 4.0, "subindex_3": -0.214948039, "categori_2": 3.0 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 17.064420928067833, 48.118214904109713 ], [ 17.06623558686395, 48.03111128189601 ], [ 17.091640810009615, 47.708102016186864 ], [ 16.746855638747039, 47.680882134245081 ], .... ] ] } },
Каждый субиндекс связан с категорией, и эта категория определяет класс цвета.
d3.json("eu.geo.json", function(world) {
svg.selectAll("path")
.data(world.features)
.enter().append("path")
.attr("d", path)
.attr("class", function(d) { return "nut cat" + d.properties.categories; })
Пока я показываю только один субиндекс, все работает нормально, и результирующее изображение приятное.
Теперь я не могу понять, как получить класс изменения каждой области ЕС на основе новой категории, когда я выбираю, например, subindex_2 (categori_1). Классов пять, и они фиксированы, поэтому AT11 должен измениться с .cat4 на .cat3.
d3.selectAll("input").on("change", change(world));
function change(d){
if(this.value == 'subindex_2') {
// alert("color change here");
}
Любая помощь? Как вы можете видеть из вопроса, я новичок в d3, возможно, то, что я спрашиваю, очевидно, но за день поиска я не понял, как это сделать.
редактировать: я постараюсь объяснить лучше. У меня есть таблица geojson с идентификатором и тремя столбцами, указывающими категорию, в которой указано, в какой категории должен отображаться этот регион:
ID | C1 | C2 | C3 | geodata
----------------------------
AT11 | 1 | 2 | 3 | ...
FR30 | 1 | 3 | 1 | ...
RO52 | 5 | 4 | 3 | ...
1:red
2:orange
3:yellow
4:green
5:blue
Мне нужно, чтобы хороплет менялся по щелчку с C1 на C2 или с C3 на C1 или любую возможную комбинацию. Какой из них является лучшим решением? Должен ли я назначать каждому пути идентификатор? Нет ли способа автоматически сделать это с d3.js?
Это мой полный код до сих пор.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
background: #fcfcfa;
}
.stroke {
fill: none;
stroke: #000;
stroke-width: 3px;
}
.fill {
fill: #fff;
}
.graticule {
fill: none;
stroke: #777;
stroke-width: .5px;
stroke-opacity: .5;
}
.land {
fill: #222;
}
.boundary {
fill: none;
stroke: #fff;
stroke-width: .5px;
}
.tooltip {
position: absolute;
background: rgba(200,200,200,0.75);
border: 1px solid #ddd;
padding: 5px 12px;
border-radius: 5px;
box-shadow: 2px 2px 2px rgba(120,120,120,0.55);
text-shadow: 0 1px 0 #eee;
}
.tooltip-title{
font-weight: bold;
color: #333;
margin-bottom: 5px;
}
.sub1 {
font-size: 18px;
}
.sub2 {
font-size: 18px;
}
.sub3 {
font-size: 18px;
}
.hide{
font-size:0px;
}
.cat1{
fill: #f00;
stroke: #555;
stroke-width: .2px;
}
.cat1.hover{
fill: rgba(255,150,150,0.50);
}
.cat2{
fill: #fd0;
stroke: #555;
stroke-width: .2px;
}
.cat2.hover{
fill: rgba(255,200,150,0.50);
}
.cat3{
fill: #ff0;
stroke: #555;
stroke-width: .2px;
}
.cat3.hover{
fill: rgba(255,255,150,0.50);
}
.cat4{
fill: #df0;
stroke: #555;
stroke-width: .2px;
}
.cat4.hover{
fill: rgba(200,255,150,0.50);
}
.cat5{
fill: #0f0;
stroke: #555;
stroke-width: .2px;
}
.cat5.hover{
fill: rgba(150,255,150,0.50);
}
.hover {
stroke: #fff;
stroke-width: 1px;
}
form {
position: absolute;
right: 10px;
top: 10px;
}
</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/d3.geo.projection.v0.min.js"></script>
<form>
<label><input type="radio" name="mode" value="sub1" checked> subindex_1</label>
<label><input type="radio" name="mode" value="sub2"> subindex_2</label>
<label><input type="radio" name="mode" value="sub3"> subindex_3</label>
</form>
<script>
var index = 'subindex_1';
var width = 860,
height = 860;
var projection = d3.geo.sinuMollweide()
.center([-5, 0])
.scale(1035)
.translate([width / 2, height / 2])
.precision(.1);
var path = d3.geo.path()
.projection(projection);
var tooltip = d3.select("body")
.append("div")
.attr("class", "tooltip")
.style("opacity", 0);
tooltip.append("div")
.attr("class", "tooltip-title");
tooltip.append("div")
.attr("class", "sub1");
tooltip.append("div")
.attr("class", "sub2");
tooltip.append("div")
.attr("class", "sub3");
var graticule = d3.geo.graticule();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
svg.append("defs").append("path")
.datum({type: "Sphere"})
.attr("id", "sphere")
.attr("d", path);
svg.append("use")
.attr("class", "stroke")
.attr("xlink:href", "#sphere");
svg.append("use")
.attr("class", "fill")
.attr("xlink:href", "#sphere");
svg.append("path")
.datum(graticule)
.attr("class", "graticule")
.attr("d", path);
d3.json("eu.geo.json", function(world) {
svg.selectAll("path")
.data(world.features)
.enter().append("path")
.attr("d", path)
.attr("class", function(d) { return "nut cat" + d.properties.categories; })
.attr("class1", function(d) { return "cat" + d.properties.categori_1; })
.attr("class2", function(d) { return "cat" + d.properties.categori_2; })
.on("mouseenter", function(d) {
d3.select(this).classed('hover', true);
tooltip.transition()
.duration(100)
.style("opacity", 1);
tooltip.select('.tooltip-title')
.text(d.properties.NUTS_ID);
tooltip.select('.sub1')
.text("subindex_1: " + d.properties.subindex_1);
tooltip.select('.sub2')
.text("subindex_2: " + d.properties.subindex_2);
tooltip.select('.sub3')
.text("subindex_3: " + d.properties.subindex_3 );
})
.on("mousemove", function(d) {
tooltip.style("left", (d3.event.pageX+5) + "px")
.style("top", (d3.event.pageY+5) + "px");
})
.on("mouseleave", function(d) {
d3.select(this).classed('hover', false);
tooltip.transition()
.duration(100)
.style("opacity", 0);
});
d3.selectAll("input").on("change", change(world));
function change(d){
if(this.value == 'sub1') {
d3.selectAll('.sub1').classed('hide', false);
d3.selectAll('.sub2').classed('hide', true);
d3.selectAll('.sub3').classed('hide', true);
};
if(this.value == 'sub2') {
//svg.selectAll("path").classed('cat' + d.properties.categori_1, true);
d3.selectAll('.sub1').classed('hide', true);
d3.selectAll('.sub2').classed('hide', false);
d3.selectAll('.sub3').classed('hide', true);
};
if(this.value == 'sub3'){
svg.selectAll("path").classed('cat' + d.properties.categori_2, true);
d3.selectAll('.sub1').classed('hide', true);
d3.selectAll('.sub2').classed('hide', true);
d3.selectAll('.sub3').classed('hide', false);
}
}
});
d3.select(self.frameElement).style("height", height + "px");
</script>
<div>
</div>
</body>
</html>
nut
в CSS, а затем динамически назначить цвет выбранному классу: например.d3.selectAll("path.cat2").attr("stroke","#00ff00");
- person mccannf   schedule 23.05.2013