3

我是一名新手程序员，试图制作交互式等值线图。在这里获得了几个问题的帮助后，最后一个大问题是地图图例不正确。图例应为每个分位数类别显示不同的颜色，但到目前为止，将最暗的颜色与第二大类别相关联（而不是仅用于最大类别），然后为最大类别重复该颜色。此外，对于大多数可用的分位数选择选项，图例中没有最浅的阴影。这是一个屏幕截图，显示所有颜色范围（示例中为 5 个类别）在地图本身上正确显示，但在图例上显示不正确。

我认为问题出在以下代码中，尤其是在标题“根据下拉菜单中的选择计算分位数并更新图例”下的最后一个长代码块中。我想知道将值标签添加到图例的方式是否有问题，这可能会混淆颜色的关联方式。任何见解将不胜感激！

下拉菜单：

    <div id="mapcontrols" style="position:absolute; top: 35px; left:625px;">
    <div>
        <p>Data to map:
        <select id="NumerSelection" class="MainData" style="width:225px;">
        <option value="d.OneFill" selected>Inverse (numerator set to 1)</option>
        <option value="d.pop11">County Population, July 2011</option>
        <option value="d.Members">Total Enrollees</option>
        <option value="d.Patients">Total Patients</option>
        <option value="d.MemberMonths">Member-months of Enrollment</option>
        <option value="d.AvgMembers">Average Number of Enrollees</option>

        <option value="d.id">County ID</option>
        </select></p>
        <p>Denominator:         
        <select id="DenomSelection" class="MainData" style="width:225px;">
        <option value="d.OneFill" selected>raw rate</option>
        <option value="d.pop11">County Population, July 2011</option>
        <option value="d.Members">Total Enrollees</option>
        <option value="d.Patients">Total Patients</option>
        <option value="d.MemberMonths">Member-months of Enrollment</option>
        <option value="d.AvgMembers">Average Number of Enrollees</option>
        <option value="d.id">County ID</option>
        </select></p>

        <p>Color Scheme: 
        <select id="ColorSelection">
        <option value="Blues" selected>Blues</option>
        <option value="Greys">Greys</option>
        <option value="Greens">Greens</option>
        <option value="Oranges">Oranges</option>
        <option value="Reds">Reds</option>
        <option value="Purples">Purples</option>
        <option value="YlGn">Yellow-Green</option>
        <option value="YlGnBu">Yellow-Green-Blue</option>
        <option value="GnBu">Green-Blue</option>
        <option value="BuGn">Blue-Green</option>
        <option value="PuBuGn">Purple-Blue-Green</option>
        <option value="PuBu">Purple-Blue</option>
        <option value="BuPu">Blue-Purple</option>
        <option value="RdPu">Red-Purple</option>
        <option value="PuRd">Purple-Red</option>
        <option value="OrRd">Orange-Red</option>
        <option value="YlOrRd">Yellow-Orange-Red</option>
        <option value="YlOrBr">Yellow-Orange-Brown</option>
        </select></br>

        Number of quantiles:            
        <select id="TileSelection" class="MainData"">
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5" Selected>5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        </select></p>
    </div>
    <div id="legenddiv"><p>Legend:</p></div>
    </div>

设置图例 SVG 和默认配色方案：

    var LegendContainer = d3.select('div#legenddiv')
.append('svg')
.attr('width', 100) 
.attr('height', 300)
.attr('id', 'Legendsvg')
.attr('class', 'Blues')
;

根据从配色方案下拉菜单中的选择同时更新地图多边形的配色方案以及图例框：

    d3.select("select#ColorSelection")
.on("keyup", function() {d3.selectAll("svg#Mapsvg, svg#Legendsvg").attr("class", this.value)})
.on("change", function() {d3.selectAll("svg#Mapsvg, svg#Legendsvg").attr("class", this.value)});

格式化要显示的值：

    function makenice(d) {
if(d==0){return 0;}
dec = Math.ceil(Math.log(d < 0 ? -d: d)/Math.log(10))
magnitude = Math.pow(10,3-dec)
n = Math.round(d*magnitude)/magnitude

if(dec>3){ d= numeral(n).format('0,0.[0]');}
    else{ d = numeral(n).format('0.00[0000000000]');}

return d
};

从外部 CSV 文件中获取数据：

    d3.csv('testdata.csv', function(data)
{
    ...

根据下拉菜单中的选择计算分位数并更新图例：

    d3.selectAll('select.MainData').on('change', function() {

    var Nu = document.getElementById('NumerSelection')
        Numer = Nu.options[Nu.selectedIndex].value;

    var Nd = document.getElementById('DenomSelection')
        Denom = Nd.options[Nd.selectedIndex].value;

    var Qt = document.getElementById('TileSelection')
        ntiles = Qt.options[Qt.selectedIndex].value;

    var DataArray =(data.map(function(d, i) {return +eval(Numer) / +eval(Denom);})).sort(function(a,b){return a-b});

    //set up quantiles
    var quants = d3.scale.quantile()
        .domain(DataArray)
        .range(d3.range(0,ntiles).map(function(i) {return 'q' + i + '-' + ntiles;}))
        ;

    var legendquant = quants.copy();

    //regenerate values for legend
    var legend = legendquant.quantiles();
        legend.unshift(d3.min(DataArray));
        legend.push(d3.max(DataArray));
        legend.reverse();


    //Create the legend
    var delabeltext = d3.select('svg#Legendsvg').selectAll('text').remove();
    var delabelboxes = d3.select('svg#Legendsvg').selectAll('rect').remove();

    console.log(legend)
    var legends = d3.select('svg#Legendsvg')
    var legendbars = legends.selectAll('text')
        .data(legend)
        .enter()
        .append('text')
        .attr('x', 40) 
        .attr('y', function(d, i) {return (i*30+30)})
        .text(function (d) {return d})
        ;

    legend.pop();
    legend.reverse();

    if (Nu.options[Nu.selectedIndex].text != 'Inverse (numerator set to 1)') {
       legend.reverse(); }



    var legends = d3.select('svg#Legendsvg')
    var legendbars = legends.selectAll('rect')
        .data(legend)
        .enter()
        .append('rect')
        .attr('x', 5)
        .attr('y', function(d, i) {return (i*30)+25})
        .attr('height',28)
        .attr('width',30)
        .attr('class', function (d) {return quants(d)} )
        ;
4

1 回答 1

2

分位数刻度的quantiles()方法返回每个分位数的阈值（请参阅文档）。去引用，

在第一个分位数中考虑小于阈值数组中第一个元素 quantiles()[0] 的值...

这意味着阈值将映射到上面的相应间隔。在您的情况下发生的是您传入最后一个分位数阈值，该阈值映射到最高分位数，然后是最大值，该最大值也映射到最高分位数。

解决此问题的最简单方法可能是删除第一个元素，而不是删除图例数组 ( legend.pop()) 的最后一个元素。也就是说，只需交换弹出最后一个元素的行并反转数组。

于 2013-03-15T18:13:37.587 回答