D3轴秤无法正常工作

时间：2018-08-29 11:25:46

标签： d3.js axis

我在使轴刻度在此图表中工作时遇到问题。我设法使比例尺可以与“ initialBar”元素一起使用，但除此之外，它还没有完全生效。当在'initial graph'和'updated graph'阶段中为每个元素使用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 :(得分：0)

  • 删除xAxis的public enum TestEnum : UInt16 { case ONE = 0x6E71 case TWO = 0x0002 case THREE = 0x0000 } let enumRawValue: UInt16 = 0x6E71 if let enumValue = TestEnum(rawValue: enumRawValue) { print(String(describing: enumValue)) //-> ONE } else { print("---") } ，在CSS末尾删除<script> $(function() { $("#base").hide(); var baseHeight = $(window).height(); var backLayerSRC = $('#img').attr('data-src'); $('#base').height(baseHeight); var img = new Image(); var imgWidth, imgHeight; img.onload = function() { imgHeight = this.height; imgWidth = this.width; var factor = 1 * baseHeight / imgHeight; totalWidth = Math.round(factor * imgWidth); currentWidth = totalWidth; $('#base').width(totalWidth); $('#img').attr('src', backLayerSRC); $('#img').height(baseHeight); $('#base').fadeIn(500); }; img.src = backLayerSRC; }); </script> <style> #base { position:absolute; left:0px; height:100%; } #base #img { position:absolute; left:0px; top:0px; } </style> <div id='base'> some tekst <img src='' id='img' data-src='path_to_very_large/image.png' /> </div> 

    display:none

  • 为您的svg添加width属性

    ;

  • 平移x轴

    .xAxis { display: none;};

.xAxis {}

  • 增大svg并定义条形的高度

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

  • 将svg.append('g').attr('transform','translate(0,50)').attr('class', 'xAxis').call(xAxis); 的许多引用替换为var width = 500; var height = 100; var heightBar = 50;

  • 修正您的输入内容，因为您发布的内容不是TSV，DC额外增加了2个数字（为什么？）

  • 修复height（无关闭标记）以及属性heightBar

    是什么 
    div#dropdown
相关问题
最新问题