Question

我正在尝试使用d3.js将TSV数据可视化为图形。但是我在控制台上收到以下错误。

意外值转换（NaN，450）解析转换属性.d3.v4.min.js：3：4262

意外值转换（NaN，130.64516129032256）解析转换属性.d3.v4.min.js：3：4262

意外值转换（NaN，72.5806451612903）解析转换属性.d3.v4.min.js：3：4262

意外值转换（NaN，203.22580645161293）解析转换属性.d3.v4.min.js：3：4262

意外值转换（NaN，319.35483870967744）解析转换属性.d3.v4.min.js：3：4262

意外值转换（NaN，145.16129032258067）解析转换属性.d3.v4.min.js：3：4262

我的代码如下：

<style>

.axis--x path {
  display: none;
}

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

</style>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<script>

var svg = d3.select("svg"),
    margin = {top: 20, right: 80, bottom: 30, left: 50},
    width = svg.attr("width") - margin.left - margin.right,
    height = svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var parseTime = d3.timeParse("%Y%m%d");

var x = d3.scaleTime().range([0, width]),
    y = d3.scaleLinear().range([height, 0]),
    z = d3.scaleOrdinal(d3.schemeCategory10);

var line = d3.line()
    .curve(d3.curveBasis)
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.price); });

d3.tsv("data.tsv", type, function(error, data) {
  if (error) throw error;

  var products = data.columns.slice(1).map(function(id) {
    return {
      id: id,
      values: data.map(function(d) {
        return {date: d.date, price: d[id]};
      })
    };
  });

  x.domain(d3.extent(data, function(d) { return d.date; }));

  y.domain([
    d3.min(products, function(c) { return d3.min(c.values, function(d) { return d.price; }); }),
    d3.max(products, function(c) { return d3.max(c.values, function(d) { return d.price; }); })
  ]);

  z.domain(products.map(function(c) { return c.id; }));

  g.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));

  g.append("g")
      .attr("class", "axis axis--y")
      .call(d3.axisLeft(y))
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", "0.71em")
      .attr("fill", "#000")
      .text("Price, $");

  var product = g.selectAll(".product")
    .data(products)
    .enter().append("g")
      .attr("class", "product");

  product.append("path")
      .attr("class", "line")
      .attr("d", function(d) { return line(d.values); })
      .style("stroke", function(d) { return z(d.id); });

  product.append("text")
      .datum(function(d) { return {id: d.id, value: d.values[d.values.length - 1]}; })
      .attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.price) + ")"; })
      .attr("x", 3)
      .attr("dy", "0.35em")
      .style("font", "10px sans-serif")
      .text(function(d) { return d.id; });
});

function type(d, _, columns) {
  d.date = parseTime(d.date);
  for (var i = 1, n = columns.length, c; i < n; ++i) d[c = columns[i]] = +d[c];
  return d;
}

</script>

以下是TSV数据样本：

日期Accessories_Scrap CG_Ingot Rod Sheet_Cutting Utensil_Scrap Wire_Scrap

20160701 106 129 132 123 115 127

20160702 106 129 132 123 115 127

20160703 106 128 132 123 115 127

20160704 106 128 132 123 115 127

20160705 106 128 132 123 115 127

Answer 1

使用scaleBand解决了错误，应该在d3 v4中使用。

而不是：

var x = d3.scaleTime().range([0, width]),

我用过：

var x = d3.scaleBand().rangeRound([0, width]),

基于此答案的解决方案：D3.js scaleOrdinal doesn't support rangeRoundBands method

意外值转换解析转换属性

1 个答案: