javascript - 更新 D3 条形图时出现 svg 元素缩放宽度问题

Question

我使用 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; });

}

获取数据功能(您可以点击此服务...它是公共(public)的)

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); }
    });       

Answer 1

嗯，我学习了一些有关 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); });