我使用此示例作为指南,使用 D3.js 创建了一个简单的年龄金字塔条形图:http ://www.jasondavies.com/d3-pyramid/ 。这很好用,但我想根据用户选择的数据动态更新此图表。当我将新数据附加到现有条形图时, < g > 元素和矩形会超出 svg 容器的宽度。我的第一个想法是将 < g > 元素的最大宽度设置为容器的宽度,希望矩形能够像在初始渲染中那样相应地缩放,但这似乎是不可能的。
我最大的问题(除了需要清理代码:))是我不明白为什么条形宽度在初始渲染中看起来很棒,但在更新中却变得非常大。我认为这可能是我对 D3/SVG 的一些基本误解,但我可以使用一些指导。
任何帮助表示赞赏!
初始图表生成(有效)
var ageChart,
ageBar,
ageBars,
ageTotal,
dataRange,
yScale,
topMargin,
ageChartWidth,
ageLabelSpace,
ageInnerMargin,
commas = d3.format(",.0f");
function generateAgeChart(data) {
ageData = processAgeData(data);
ageLabelSpace = 25;
ageInnerMargin = width / 2 + ageLabelSpace;
var outerMargin = 30,
gap = 8,
leftLabel = "Female",
rightLabel = "Male",
height = 180;
barWidth = height / ageData.length;
width = 200;
ageChartWidth = width - ageInnerMargin - outerMargin;
topMargin = 25;
yScale = d3.scale.linear().domain([0, ageData.length]).range([0, height - topMargin]);
dataRange = d3.max(ageData.map(function (d) { return Math.max(d.female, d.male) }));
ageTotal = d3.scale.linear().domain([0, dataRange]).range([0, ageChartWidth - ageLabelSpace]);
/* main panel */
ageChart = d3.select("#chart-3").append("svg")
.attr("class", "d3-chart")
.attr("width", width)
.attr("height", height);
/* female label */
ageChart.append("text")
.attr("class", "bar-label")
.text(leftLabel)
.attr("x", width - ageInnerMargin)
.attr("y", topMargin - 3)
.attr("text-anchor", "end");
/* male label */
ageChart.append("text")
.attr("class", "bar-label")
.text(rightLabel)
.attr("x", ageInnerMargin)
.attr("y", topMargin - 3);
/* bars and data labels */
ageBar = ageChart.selectAll("g.bar")
.data(ageData)
.enter().append("g")
.attr("class", "bar")
.attr("transform", function (d, i) {
return "translate(0," + (yScale(i) + topMargin) + ")";
});
var highlight = function (c) {
return function (d, i) {
ageBar.filter(function (d, j) {
return i === j;
}).attr("class", c);
};
};
ageBar
.on("mouseover", highlight("highlight bar"))
.on("mouseout", highlight("bar"));
ageBar.append("rect")
.attr("class", "femalebar")
.attr("height", barWidth - gap);
ageBar.append("text")
.attr("class", "femalebar")
.attr("dx", -3)
.attr("dy", "1.7em")
.attr("text-anchor", "end");
ageBar.append("rect")
.attr("class", "malebar")
.attr("height", barWidth - gap)
.attr("x", ageInnerMargin);
ageBar.append("text")
.attr("class", "malebar")
.attr("dx", 3)
.attr("dy", "1.7em");
/* sharedLabels */
ageBar.append("text")
.attr("class", "shared")
.attr("x", width / 2)
.attr("dy", "1.7em")
.attr("text-anchor", "middle")
.text(function (d) { return d.sharedLabel; });
// Draw the chart
ageBars = d3.selectAll("g.bar")
.data(ageData);
ageBars.selectAll("rect.malebar")
.transition()
.attr("width", function (d) { return ageTotal(d.male); });
ageBars.selectAll("rect.femalebar")
.transition()
.attr("x", function (d) { return ageInnerMargin - ageTotal(d.female) - 2 * ageLabelSpace; })
.attr("width", function (d) { return ageTotal(d.female); });
ageBars.selectAll("text.malebar")
.text(function (d) { return commas(d.male); })
.transition().attr("x", function (d) { return ageInnerMargin + ageTotal(d.male); });
ageBars.selectAll("text.femalebar")
.text(function (d) { return commas(d.female); })
.transition()
.attr("x", function (d) { return ageInnerMargin - ageTotal(d.female) - 2 * ageLabelSpace; });
// Title
ageChart.append("text")
.attr("x", (width / 2))
.attr("y", 10)
.attr("text-anchor", "middle")
.attr("font-size", "10pt")
.style("fill", "#333960")
.style("font-weight", "bold")
//.style("text-decoration", "underline")
.style("font-weight", "bold")
.text("Age");
}
重绘图表功能(问题区域)
function redrawAgeChart(data) {
// Get and process data
ageData = processAgeData(data);
width = 200;
height = 180;
outerMargin = 30;
topMargin = 25;
gap = 8;
height = 180;
barWidth = height / ageData.length;
ageLabelSpace = 25;
ageInnerMargin = width / 2 + ageLabelSpace;
ageChartWidth = width - ageInnerMargin - outerMargin;
yScale = d3.scale.linear().domain([0, ageData.length]).range([0, height - topMargin]);
dataRange = d3.max(ageData.map(function (d) { return Math.max(d.female, d.male) }));
ageTotal = d3.scale.linear().domain([0, dataRange]).range([0, ageChartWidth - ageLabelSpace]);
ageBars = d3.selectAll("g.bar")
.data(ageData);
ageBars.selectAll("rect.malebar")
.transition()
.attr("width", function (d) { return ageTotal(d.male); });
ageBars.selectAll("rect.femalebar")
.transition()
.attr("x", function (d) { return ageInnerMargin - ageTotal(d.female) - 2 * ageLabelSpace; })
.attr("width", function (d) { return ageTotal(d.female); });
ageBars.selectAll("text.malebar")
.text(function (d) { return commas(d.male); })
.transition().attr("x", function (d) { return ageInnerMargin + ageTotal(d.male); });
ageBars.selectAll("text.femalebar")
.text(function (d) { return commas(d.female); })
.transition().attr("x", function (d) { return ageInnerMargin - ageTotal(d.female) - 2 * ageLabelSpace; });
}
获取数据功能(你可以点击这个服务......它是公开的)
function processAgeData(data) {
ageData = [];
var totalF_6_17 = 0;
var totalF_18_34 = 0;
var totalF_35_54 = 0;
var totalF_55_plus = 0;
var totalF_under5 = 0;
var totalM_6_17 = 0;
var totalM_18_34 = 0;
var totalM_35_54 = 0;
var totalM_55_plus = 0;
var totalM_under5 = 0;
// Loop through return to build a new array of values
$.each(data.features, function (key, val) {
var f_6_17 = val.properties.f_6_17;
var f_18_34 = val.properties.f_18_34;
var f_35_54 = val.properties.f_35_54;
var f_55_plus = val.properties.f_55_plus;
var f_under5 = val.properties.f_under5;
var m_6_17 = val.properties.m_6_17;
var m_18_34 = val.properties.m_18_34;
var m_35_54 = val.properties.m_35_54;
var m_55_plus = val.properties.m_55_plus;
var m_under5 = val.properties.m_under5;
totalF_6_17 = totalF_6_17 + f_6_17;
totalF_18_34 = totalF_18_34 + f_18_34;
totalF_35_54 = totalF_35_54 + f_35_54;
totalF_55_plus = totalF_55_plus + f_55_plus;
totalF_under5 = totalF_under5 + f_under5;
totalM_6_17 = totalM_6_17 + m_6_17;
totalM_18_34 = totalM_18_34 + m_18_34;
totalM_35_54 = totalM_35_54 + m_35_54;
totalM_55_plus = totalM_55_plus + m_55_plus;
totalM_under5 = totalM_under5 + m_under5;
});
var under5Obj = new Object();
under5Obj.sharedLabel = "< 5";
under5Obj.female = totalF_under5;
under5Obj.male = totalM_under5;
var age6_17Obj = new Object();
age6_17Obj.sharedLabel = "6 - 17";
age6_17Obj.female = totalF_6_17;
age6_17Obj.male = totalM_6_17;
var age18_34Obj = new Object();
age18_34Obj.sharedLabel = "18 - 34";
age18_34Obj.female = totalF_18_34;
age18_34Obj.male = totalM_18_34;
var age35_54Obj = new Object();
age35_54Obj.sharedLabel = "35 - 54";
age35_54Obj.female = totalF_35_54;
age35_54Obj.male = totalM_35_54;
var over55Obj = new Object();
over55Obj.sharedLabel = "55 +";
over55Obj.female = totalF_55_plus;
over55Obj.male = totalM_55_plus;
ageData.push(under5Obj);
ageData.push(age6_17Obj);
ageData.push(age18_34Obj);
ageData.push(age35_54Obj);
ageData.push(over55Obj);
return ageData;
}
// Age Chart Request
//// use this url to get the entire dataset which should display correctly
url = 'http://gis.drcog.org/geoserver/DRCOGPUB/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=DRCOGPUB:rea_demographics_age_county_view&maxFeatures=10000&outputFormat=json&propertyName=f_under5,f_6_17,f_18_34,f_35_54,f_55_plus,m_under5,m_6_17,m_18_34,m_35_54,m_55_plus,geoid&format_options=callback:redrawAgeChart'
//// use this for the update request
selectionUrl = "http://gis.drcog.org/geoserver/DRCOGPUB/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=DRCOGPUB:rea_demographics_age_county_view&maxFeatures=10000&outputFormat=json&propertyName=f_under5,f_6_17,f_18_34,f_35_54,f_55_plus,m_under5,m_6_17,m_18_34,m_35_54,m_55_plus,geoid&format_options=callback:redrawAgeChart&cql_filter=geoid%20IN%20('08059')"
$.ajax({
type: 'get',
url: url,
dataType: "jsonp",
crossDomain: true,
cache: false,
error: function (jqXHR, textStatus, errorThrown) { console.log(textStatus); }
});