D3.js D3轴秤工作不正常

我在这张图表中无法使用轴刻度。我已经设法使天平与“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:

• 移除xAxis的

  显示：无

  ，无

  在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有两个额外的数字（为什么？）

• 修复

  div#下拉列表（无关闭标记）和属性
  div
  
  <div id="dropdown" div style="margin-bottom: 10px;">
  <div id="tooltip" class="hidden">
  </div>
  
  
  

---

非常感谢您！为了回答您的问题-文件本身实际上是TSV，但我只是在今天下午打开它的任何本机应用程序中打开了它，这就是它显示的格式，所以我只是复制和粘贴-抱歉造成混淆。再次，非常感谢-这是一个巨大的帮助。哦，我还想隐藏轴线和刻度线；我只是担心让天平正常工作。

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

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