Skip to content

Commit

Permalink
[#132] implement remove and replace geojson layer methods
Browse files Browse the repository at this point in the history
  • Loading branch information
@NickQiZhu
NickQiZhu committed Feb 21, 2013
1 parent d8200fb commit c19916b
Show file tree
Hide file tree
Showing 5 changed files with 169 additions and 72 deletions.
64 changes: 46 additions & 18 deletions dc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2896,16 +2896,18 @@ dc.compositeChart = function(parent, chartGroup) {

return _chart.anchor(parent, chartGroup);
};
dc.geoChoroplethChart = function(parent, chartGroup) {
dc.geoChoroplethChart = function (parent, chartGroup) {
var _chart = dc.singleSelectionChart(dc.colorChart(dc.baseChart({})));

_chart.colorAccessor(function(d, i){return d;});
_chart.colorAccessor(function (d, i) {
return d;
});

var _geoPath = d3.geo.path();

var _geoJsons = [];

_chart.doRender = function() {
_chart.doRender = function () {
_chart.resetSvg();

for (var layerIndex = 0; layerIndex < _geoJsons.length; ++layerIndex) {
Expand Down Expand Up @@ -2958,18 +2960,18 @@ dc.geoChoroplethChart = function(parent, chartGroup) {
function renderRegionG(layerIndex) {
var regionG = _chart.svg()
.selectAll(layerSelector(layerIndex))
.classed("selected", function(d) {
.classed("selected", function (d) {
return isSelected(layerIndex, d);
})
.classed("deselected", function(d) {
.classed("deselected", function (d) {
return isDeselected(layerIndex, d);
})
.attr("class", function(d) {
.attr("class", function (d) {
var layerNameClass = geoJson(layerIndex).name;
var regionClass = dc.utils.nameToId(geoJson(layerIndex).keyAccessor(d));
var baseClasses = layerNameClass + " " + regionClass;
if(isSelected(layerIndex, d)) baseClasses += " selected";
if(isDeselected(layerIndex, d)) baseClasses += " deselected";
if (isSelected(layerIndex, d)) baseClasses += " selected";
if (isDeselected(layerIndex, d)) baseClasses += " deselected";
return baseClasses;
});
return regionG;
Expand Down Expand Up @@ -2998,30 +3000,30 @@ dc.geoChoroplethChart = function(parent, chartGroup) {
function renderPaths(regionG, layerIndex, data, maxValue) {
var paths = regionG
.select("path")
.attr("fill", function(d) {
.attr("fill", function (d) {
var currentFill = d3.select(this).attr("fill");
if (currentFill)
return currentFill;
return "none";
})
.on("click", function(d) {
.on("click", function (d) {
return _chart.onClick(d, layerIndex);
});

dc.transition(paths, _chart.transitionDuration()).attr("fill", function(d, i) {
dc.transition(paths, _chart.transitionDuration()).attr("fill", function (d, i) {
return _chart.getColor(data[geoJson(layerIndex).keyAccessor(d)], i);
});
}

_chart.onClick = function(d, layerIndex) {
_chart.onClick = function (d, layerIndex) {
var selectedRegion = geoJson(layerIndex).keyAccessor(d);
if (selectedRegion == _chart.filter()) {
dc.events.trigger(function() {
dc.events.trigger(function () {
_chart.filter(null);
dc.redrawAll(_chart.chartGroup());
});
} else {
dc.events.trigger(function() {
dc.events.trigger(function () {
_chart.filter(selectedRegion);
dc.redrawAll(_chart.chartGroup());
});
Expand All @@ -3030,30 +3032,56 @@ dc.geoChoroplethChart = function(parent, chartGroup) {

function renderTitle(regionG, layerIndex, data) {
if (_chart.renderTitle()) {
regionG.selectAll("title").text(function(d) {
regionG.selectAll("title").text(function (d) {
var key = getKey(layerIndex, d);
var value = data[key];
return _chart.title()({key: key, value: value});
});
}
}

_chart.doRedraw = function() {
_chart.doRedraw = function () {
for (var layerIndex = 0; layerIndex < _geoJsons.length; ++layerIndex) {
plotData(layerIndex);
}
};

_chart.overlayGeoJson = function(json, name, keyAccessor) {
_chart.overlayGeoJson = function (json, name, keyAccessor) {
for (var i = 0; i < _geoJsons.length; ++i) {
if (_geoJsons[i].name == name) {
_geoJsons[i].data = json;
_geoJsons[i].keyAccessor = keyAccessor;
return _chart
}
}
_geoJsons.push({name: name, data: json, keyAccessor: keyAccessor});
return _chart;
};

_chart.projection = function(projection) {
_chart.projection = function (projection) {
_geoPath.projection(projection);
return _chart;
};

_chart.geoJsons = function () {
return _geoJsons;
};

_chart.removeGeoJson = function (name) {
var geoJsons = [];

for (var i = 0; i < _geoJsons.length; ++i) {
var layer = _geoJsons[i];
if (layer.name != name) {
geoJsons.push(layer);
}
}

_geoJsons = geoJsons;

return _chart;
};

return _chart.anchor(parent, chartGroup);
};
dc.bubbleOverlay = function(root, chartGroup) {
Expand Down
2 changes: 1 addition & 1 deletion dc.min.js
View file

Large diffs are not rendered by default.

64 changes: 46 additions & 18 deletions src/geo-choropleth-chart.js
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
dc.geoChoroplethChart = function(parent, chartGroup) {
dc.geoChoroplethChart = function (parent, chartGroup) {
var _chart = dc.singleSelectionChart(dc.colorChart(dc.baseChart({})));

_chart.colorAccessor(function(d, i){return d;});
_chart.colorAccessor(function (d, i) {
return d;
});

var _geoPath = d3.geo.path();

var _geoJsons = [];

_chart.doRender = function() {
_chart.doRender = function () {
_chart.resetSvg();

for (var layerIndex = 0; layerIndex < _geoJsons.length; ++layerIndex) {
Expand Down Expand Up @@ -60,18 +62,18 @@ dc.geoChoroplethChart = function(parent, chartGroup) {
function renderRegionG(layerIndex) {
var regionG = _chart.svg()
.selectAll(layerSelector(layerIndex))
.classed("selected", function(d) {
.classed("selected", function (d) {
return isSelected(layerIndex, d);
})
.classed("deselected", function(d) {
.classed("deselected", function (d) {
return isDeselected(layerIndex, d);
})
.attr("class", function(d) {
.attr("class", function (d) {
var layerNameClass = geoJson(layerIndex).name;
var regionClass = dc.utils.nameToId(geoJson(layerIndex).keyAccessor(d));
var baseClasses = layerNameClass + " " + regionClass;
if(isSelected(layerIndex, d)) baseClasses += " selected";
if(isDeselected(layerIndex, d)) baseClasses += " deselected";
if (isSelected(layerIndex, d)) baseClasses += " selected";
if (isDeselected(layerIndex, d)) baseClasses += " deselected";
return baseClasses;
});
return regionG;
Expand Down Expand Up @@ -100,30 +102,30 @@ dc.geoChoroplethChart = function(parent, chartGroup) {
function renderPaths(regionG, layerIndex, data, maxValue) {
var paths = regionG
.select("path")
.attr("fill", function(d) {
.attr("fill", function (d) {
var currentFill = d3.select(this).attr("fill");
if (currentFill)
return currentFill;
return "none";
})
.on("click", function(d) {
.on("click", function (d) {
return _chart.onClick(d, layerIndex);
});

dc.transition(paths, _chart.transitionDuration()).attr("fill", function(d, i) {
dc.transition(paths, _chart.transitionDuration()).attr("fill", function (d, i) {
return _chart.getColor(data[geoJson(layerIndex).keyAccessor(d)], i);
});
}

_chart.onClick = function(d, layerIndex) {
_chart.onClick = function (d, layerIndex) {
var selectedRegion = geoJson(layerIndex).keyAccessor(d);
if (selectedRegion == _chart.filter()) {
dc.events.trigger(function() {
dc.events.trigger(function () {
_chart.filter(null);
dc.redrawAll(_chart.chartGroup());
});
} else {
dc.events.trigger(function() {
dc.events.trigger(function () {
_chart.filter(selectedRegion);
dc.redrawAll(_chart.chartGroup());
});
Expand All @@ -132,29 +134,55 @@ dc.geoChoroplethChart = function(parent, chartGroup) {

function renderTitle(regionG, layerIndex, data) {
if (_chart.renderTitle()) {
regionG.selectAll("title").text(function(d) {
regionG.selectAll("title").text(function (d) {
var key = getKey(layerIndex, d);
var value = data[key];
return _chart.title()({key: key, value: value});
});
}
}

_chart.doRedraw = function() {
_chart.doRedraw = function () {
for (var layerIndex = 0; layerIndex < _geoJsons.length; ++layerIndex) {
plotData(layerIndex);
}
};

_chart.overlayGeoJson = function(json, name, keyAccessor) {
_chart.overlayGeoJson = function (json, name, keyAccessor) {
for (var i = 0; i < _geoJsons.length; ++i) {
if (_geoJsons[i].name == name) {
_geoJsons[i].data = json;
_geoJsons[i].keyAccessor = keyAccessor;
return _chart
}
}
_geoJsons.push({name: name, data: json, keyAccessor: keyAccessor});
return _chart;
};

_chart.projection = function(projection) {
_chart.projection = function (projection) {
_geoPath.projection(projection);
return _chart;
};

_chart.geoJsons = function () {
return _geoJsons;
};

_chart.removeGeoJson = function (name) {
var geoJsons = [];

for (var i = 0; i < _geoJsons.length; ++i) {
var layer = _geoJsons[i];
if (layer.name != name) {
geoJsons.push(layer);
}
}

_geoJsons = geoJsons;

return _chart;
};

return _chart.anchor(parent, chartGroup);
};
95 changes: 61 additions & 34 deletions test/geo-choropleth-chart-test.js
View file

Large diffs are not rendered by default.

16 changes: 15 additions & 1 deletion wiki/api.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -681,7 +681,8 @@ var chart2 = dc.compositeChart("#us-chart2", "chartGroupA");

#### .overlayGeoJson(json, name, keyAccessor) - **mandatory**
Use this function to insert a new GeoJson map layer. This function can be invoked multiple times if you have multiple GeoJson
data layer to render on top of each other.
data layer to render on top of each other. If you overlay mutiple layers with the same name the new overlay will simply
override the existing one.

Parameters:
* json - GeoJson feed
Expand All @@ -700,6 +701,19 @@ chart.overlayGeoJson(statesJson.features, "state", function(d) {
Set custom geo projection function. Available [d3 geo projection functions](https://github.com/mbostock/d3/wiki/Geo-Projections).
Default value: albersUsa.

#### .geoJsons()
Return all GeoJson layers currently registered with thit chart. The returned array is a reference to this chart's internal
registration data structure without copying thus any modification to this array will also modify this chart's internal
registration.

Return:
An array of objects containing fields {name, data, accessor}

#### .removeGeoJson(name)
Remove a GeoJson layer from this chart by name

Return: chart instance

## <a name="data-count" href="#data-count">#</a> Data Count Widget [Concrete] < [Base Chart](#base-chart)
Data count is a simple widget designed to display total number records in the data set vs. the number records selected
by the current filters. Once created data count widget will automatically update the text content of the following elements
Expand Down

0 comments on commit c19916b

Please sign in to comment.