更新 D3 条形图时调用 svg 元素的宽度的问题
Issue scalling width of svg elements while updating D3 bar chart
我用 D3 创建了一个简单的年龄金字塔条形图.js以这个例子为指导:http://www.jasondavies.com/d3-pyramid/。这工作正常,但我想根据用户选择的数据动态更新此图表。当我将新数据附加到现有柱线时,
我最大的问题(除了需要清理代码:))是我不明白为什么条形宽度在初始渲染中看起来很棒,但在更新中却增长得非常大。我认为这可能是我对 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); }
});
好吧,我学到了一些关于D3和SVG的知识,并设法抓住了我相当愚蠢的错误。 我以错误的方式将数据附加到矩形元素。我通过直接从图表 svg 中单独选择男性/女性柱线并将数据附加到每个选择中来解决此问题。现在,这按计划工作。
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]);
ageChart.selectAll("rect.malebar")
.data(ageData)
.transition()
.attr("width", function (d) { return ageTotal(d.male); });
ageChart.selectAll("rect.femalebar")
.data(ageData)
.transition()
.attr("x", function (d) { return ageInnerMargin - ageTotal(d.female) - 2 * ageLabelSpace; })
.attr("width", function (d) { return ageTotal(d.female); });
ageChart.selectAll("text.malebar")
.data(ageData)
.text(function (d) { return commas(d.male); });
});
ageChart.selectAll("text.femalebar")
.data(ageData)
.text(function (d) { return commas(d.female); });
相关文章:
- Small Javascript从动态表单中删除多个元素的问题
- 使用javascript删除元素时出现的问题
- 获取要引发的fadeIn元素时出现问题
- 使用AngularJS UI路由器时出现元素绑定问题
- 访问带有变量的Object元素时出现问题
- 数据互绑定问题:转换器只运行一次,无法绑定元素的 ID
- 在方形空间 (YUI) 上重绘元素时出现问题
- 替换
元素中的特殊字符的问题
- 在自定义元素中扩展 HTMLCanvasElement 问题
- 在具有CONTENT标记的自定义元素中使用SELECT标记时出现问题
- 性能问题:存储对DOM元素的引用与使用选择器相比
- OnMouseMove on body标记导致子下拉元素出现问题
- Javascript连接元素,出现问题
- 包含方法和突出显示元素的问题
- 单击元素时出现问题,这些元素是用.html()添加到页面的
- 将元素推送到嵌套数组的问题
- firefox中的浮动元素问题
- 这种计算画布元素中非白色像素的方法有什么问题
- Scriptaculous排序表和句柄的问题(元素排序不正确)
- 问题元素相同的类