Question

我有一个D3js代码，可以生成条形图并且可以在版本3.x中正常工作。我想将代码升级到版本5以便进行更新。这样做后，我能够纠正一些语法更新，例如scaleLinear，scaleBand等。数据通过tsv导入。代码能够在页面上显示具有正确的条形x宽度的图形。但是，yAxis条越界越大，y轴上的比例非常短。例如，数据显示数据的最大值为30000，但yaxis仅为0-90。经过进一步研究，生成y数据的d.RFU值似乎没有从字符串转换为整数。在v3代码中，我在末尾有一个函数，它使用一元运算符将d.RFU的类型转换为整数 d.RFU = +d.RFU

然而，它似乎不适用于v5。这可能是由于promises实现替换了异步代码吗？有关如何在版本5中解决此问题的任何解决方案？

如果您需要更多信息，请告诉我，如果我错过任何内容，请告诉我，因为我是编程和本网站的新手。任何帮助表示赞赏。

以下是我现在拥有的部分代码：

  //set dimensions of SVG and margins
  var margin = { top: 30,  right: 100,  bottom: 50,   left: 100,  },
    width = divWidth - margin.left - margin.right,
    height = 250 - margin.top - margin.bottom,
    x = d3.scaleBand()
            .range([0, width - 20], 0.1),
    y = d3.scaleLinear()
        .range([height,0]); 
  //setup the axis
  var xAxis = d3.axisBottom(x);
  var yAxis = d3.axisLeft(y);  
  var svg = d3.select("#bargraphID")
    .append("svg")
    .attr("width", width + margin.left + margin.right - 100)
    .attr("height", height + margin.top + margin.bottom - 10)
    .append("g")
    .attr("transform", "translate (" + margin.left + "," + margin.top + ")");


d3.tsv(filename).then(function(data) {
    // get x values from the document id
    x.domain(data.map(function(d) {
      return d.ID;
    }));
    yMax = d3.max(data, function(d) {
      return d.RFU;
    });
    // get the y values from the document RFU tab
    y.domain([0, yMax]);

 //create the x-axis
    svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate (0, " + height + ")")
      .call(xAxis)
      .selectAll("text")
      .style("text-anchor", "middle")
      .attr("dx", "0em")
      .attr("dy", "-0.55em")
      .attr("y", 30)
      .attr("class", "x-axisticks");


  //create the y-axis
    svg.append("g")
      .attr("class", "y axis")
      .call(yAxis);          

    //add the data as bars
    var bar = svg.selectAll("bar")
      .data(data)
      .enter()
      .append("rect")
      .style("fill", barColor)
      .attr("fill-opacity", "0.3")
      .attr("x", function(d) {
        return x(d.ID);
      })
      .attr("width", x.bandwidth())
      //set initial coords for bars for animation.
      .attr("y", height)
      .attr("height", 0)
      //animate bars to final heights
      .transition()
      .duration(700)
      .attr("y", function(d) {
        return y(d.RFU);
      })
      .attr("height", function(d) {
        return height - y(d.RFU);
        })
      .attr("fill-opacity", "1.0")
      .attr("class", "y-data");

 });

  //convert RFU to integers
  function type(d) {
    d.RFU = +d.RFU;
    return d;
  }

Answer 1

与旧的v3和v4版本一样，您必须在D3 v5中将行转换功能传递给d3.tsv：

d3.tsv(filename, type)

然后，使用then的承诺。请记住，d3.tsv始终返回字符串（无论是D3 v3，v4还是v5），because：

如果未指定行转换功能，则字段值为字符串。

这是带有虚假数据的演示：

var tsv = URL.createObjectURL(new Blob([
  `name	RFU
  foo	12
  bar	42
  baz	17`
]));

d3.tsv(tsv, type).then(function(data) {
  console.log(data)
})

function type(d) {
  d.RFU = +d.RFU;
  return d;
}

<script src="https://d3js.org/d3.v5.min.js"></script>

PS：由于SO片段可能在某些浏览器中加载该blob时出现问题，因此JSFiddle中的代码相同，请检查控制台：https://jsfiddle.net/kv0ea0x2/

D3js v3到v5升级：无法将字符串转换为整数

1 个答案: