Весы оси D3 не работают должным образом - PullRequest
Новая
       14

Весы оси D3 не работают должным образом

0 голосов
/ 29 августа 2018

У меня проблема с настройкой масштабов осей на этом графике. Мне удалось настроить масштаб для работы с элементом initialBar, но, кроме того, он не действует. При использовании console.log для каждого элемента в фазах «начальный график» и «обновленный график» я заметил, что результаты выдаются в виде массивов, а не значений. Поэтому я добавил d3.max к каждому, чтобы получить фактическое число, которое работает сейчас, но оно не позволит мне применить ту же концепцию к «обновленным» графикам.

Кроме того, вы можете видеть, что ширина svg должна быть 500px, но независимо от того, что я делаю с настройками ширины или масштаба, она увеличивается только до 300px. Не уверен, что я делаю не так:

Сценарий: 

d3.tsv("/DOL_data.tsv", function (data) {

    //Set scales & ranges
    var width = 500;
    var height = 50;
    var x = d3.scaleLinear()
        .domain([0,d3.max(data, function(d) { return 30 + parseFloat(d.H_MEAN)})])
        //.domain([0,66])
        .range([0,width])

    var svg = d3.select('body').append('svg').attr('height',height);
    var xAxis = d3.axisBottom(x);

    svg.append('g').attr('class', 'xAxis').call(xAxis);

    var barText = function (d) { return d3.format("($.0f")(1 + parseFloat(d.H_MEAN));};
    var targetText = function (d) { return d3.format("($.0f")(21 + parseFloat(d.H_MEAN));};

    //Data aggregation
    var nest = d3.nest()
      .key(function (d) {return d.STATE;})
      .entries(data);

    //Create dropdown
    var stateList = d3.select('#dropdown')
    .append('select')
    .attr('class','select')
    .on('change',onchange);

    var options = stateList
    .selectAll('option')
    .data(nest).enter().append('option')
    .attr('value', function (d) {return d.key;})
    .text(function (d) {return d.key});

    //Create initial graph
    var initialGraph = function (state) {

        var selectState = nest.filter(function (d) { return d.key == state;})
        var selectStateGroupsB = svg.selectAll('.wageBar')
          .data(selectState, function (d) { return d ? d.key : this.key;})
          .enter().append('g').attr("class", "wageBar")
        var selectStateGroupsL = svg.selectAll('.wageLine')
          .data(selectState, function (d) { return d ? d.key : this.key;})
          .enter().append('g').attr("class", "wageLine")
    ;

    var initialBar = selectStateGroupsB.selectAll('.rect')
            .data(function (d) { return d.values; }).enter().append('rect')
            .attr('height', height)
            .attr('width', function(d){return x(parseFloat(d3.max(d.H_MEAN))); })
            .attr('fill', '#38ACEC')
            .attr('x',0)
            .attr('y',0);

            console.log(d3.max(data, function(d) {return d.H_MEAN}));

        var initialLine = selectStateGroupsL.selectAll('.line')
            .data(function (d) { return d.values; }).enter().append('line')
            .attr('stroke','#444444')
            .attr('stroke-width',4)
            .attr('x1', function (d) { return x(20 + parseFloat(d3.max(d.H_MEAN)));})
            .attr('x2', function (d) { return x(20 + parseFloat(d3.max(d.H_MEAN)));})
            .attr('y1',0)
            .attr('y2',height);

        var initialBarText = selectStateGroupsB.selectAll('.text')
            .data(function (d) { return d.values; }).enter().append('text')
            .text(barText)
            .attr('y',height/2).attr('x', function(d){return x(1 + parseFloat(d3.max(d.H_MEAN)));})
            .attr('alignment-baseline', 'central')
            .attr('font-family', 'Arial').attr('font-size', '10px').attr('alignment-baseline','central');

        var initialLineText = selectStateGroupsL.selectAll('.text')
            .data(function (d) { return d.values; }).enter().append('text')
            .text(targetText)
            .attr('y',height/2).attr('x', function(d){return x(21 + parseFloat(d3.max(d.H_MEAN)))})
            .attr('font-family', 'Arial').attr('font-size', '10px').attr('alignment-baseline','central');
    }

    initialGraph('Alabama');

    //Update graph
    var updateGraph = function(state) {
        var selectState = nest.filter(function (d) { return d.key == state;})
        var selectStateGroupsB = svg.selectAll('.wageBar')
            .data(selectState);
        var selectStateGroupsL = svg.selectAll('.wageLine')
            .data(selectState);

        selectStateGroupsB.selectAll('rect')
             .data(function(d){return (d.values);}).transition().duration(1000)
             .attr('width',function(d) {return x(d.H_MEAN); });

        selectStateGroupsL.selectAll('line')
                .data(function (d) { return (d.values); }).transition().duration(1000)
                .attr('x1',function (d) { return x(20 + parseFloat(d.H_MEAN))})
                .attr('x2',function (d) { return x(20 + parseFloat(d.H_MEAN))});

        selectStateGroupsB.selectAll('text')
                .data(function (d) { return d.values; }).transition().duration(1000)
                .text(barText)
                .attr('y',height/2).attr('x', function(d) {return x(1 + parseFloat(d.H_MEAN))})
                .attr('font-family', 'Arial').attr('font-size', '10px').attr('alignment-baseline','central');

        selectStateGroupsL.selectAll('text')
                .data(function (d) { return d.values; }).transition().duration(1000)
                .text(targetText)
                .attr('y',height/2).attr('x',function(d){return x(21 + parseFloat(d.H_MEAN))})
                .attr('font-family', 'Arial').attr('font-size', '10px').attr('alignment-baseline','central');
    }

    function onchange() {
        var selectedState = d3.select('select').property('value');
        updateGraph(selectedState);
    };

});

HTML: 

<!DOCTYPE html>
<html>
<head>
    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
</head>

<body>
  <style>
  body {
    margin: auto;
    padding-top: 40px;
    position: relative;
    width: 500px;
  }

.xAxis { display: none;};

</style>
    <script type='text/javascript' src='chart.js'></script>
  <div id="dropdown" div style="margin-bottom: 10px;">
  <div id="tooltip" class="hidden">
  </div>
</body>

</html>

Пример данных: 

AREA    ST  STATE   OCC_CODE    OCC_TITLE   OCC_GROUP   TOT_EMP EMP_PRSE    JOBS_1000   LOC_Q   H_MEAN  A_MEAN  MEAN_PRSE   H_PCT10 H_PCT25 H_MEDIAN    H_PCT75 H_PCT90 A_PCT10 A_PCT25 A_MEDIAN    A_PCT75 A_PCT90
01  AL  Alabama 29-1141 Registered Nurses   detailed    49,290  1.4 25.638  1.26    27.83   57,890  0.5 20.14   22.82   27.20   31.71   37.40   41,890  47,470  56,570  65,950  77,790
02  AK  Alaska  29-1141 Registered Nurses   detailed    5,570   3.8 17.504  0.86    42.07   87,510  2.1 29.94   34.63   41.45   49.00   57.31   62,270  72,030  86,220  101,910 119,210
04  AZ  Arizona 29-1141 Registered Nurses   detailed    54,630  2.9 20.203  0.99    36.11   75,110  0.8 26.14   30.64   35.70   41.69   47.76   54,370  63,720  74,260  86,720  99,350
05  AR  Arkansas    29-1141 Registered Nurses   detailed    24,380  4.0 20.318  1.00    28.28   58,810  1.3 20.06   23.13   27.68   32.88   37.97   41,730  48,100  57,570  68,400  78,980
06  CA  California  29-1141 Registered Nurses   detailed    282,290 1.7 16.908  0.83    49.37   102,700 0.8 30.98   38.56   48.43   60.30   72.70   64,430  80,210  100,730 125,430 151,210
08  CO  Colorado    29-1141 Registered Nurses   detailed    49,340  1.7 19.309  0.95    34.89   72,570  0.6 25.67   28.89   34.27   40.19   47.02   53,390  60,100  71,280  83,600  97,810
09  CT  Connecticut 29-1141 Registered Nurses   detailed    34,310  7.7 20.741  1.02    38.56   80,200  1.0 27.58   32.71   38.22   45.21   49.77   57,360  68,040  79,500  94,030  103,520
10  DE  Delaware    29-1141 Registered Nurses   detailed    11,620  2.8 26.246  1.29    35.18   73,180  1.9 26.13   29.44   34.43   39.26   47.08   54,350  61,240  71,610  81,660  97,930
11  DC  District of Columbia    29-1141 Registered Nurses   detailed    11,000  2.4 15.539  0.76    43.32   90,110  5.1 27.53   33.54   41.85   49.44   61.92   57,270  69,760  87,040  102,840 128,790
12  FL  Florida 29-1141 Registered Nurses   detailed    178,330 2.1 21.182  1.04    31.20   64,890  0.6 22.51   26.36   30.32   36.12   40.64   46,830  54,840  63,060  75,130  84,530

1 Ответ

0 голосов
/ 29 августа 2018

  • удалить display:none оси x, нет ; в конце css 

    .xAxis { display: none;};

.xAxis {}

  • добавить атрибут ширины в svg 

    var svg = d3.select('body').append('svg').attr('height',height).attr('width', width);

  • Перевести ось X 

    svg.append('g').attr('transform','translate(0,50)').attr('class', 'xAxis').call(xAxis);

  • увеличить SVG и определить высоту для столбцов 

    var width = 500;
var height = 100;
var heightBar = 50;

  • заменить множество ссылок от height на heightBar

  • исправить ваш ввод, потому что то, что вы публикуете, не является TSV, а DC имеет 2 дополнительных числа (почему?)

  • исправить div#dropdown (без закрывающего тега) и что это за атрибут div

    <div id="dropdown" div style="margin-bottom: 10px;">
<div id="tooltip" class="hidden">
</div>
...