时间戳

首页 > 解决方案 > 错误：属性 d：预期数字，“M67,0L67,0LNaN,0LNaN,0L728”

javascript - 错误：属性 d：预期数字，“M67,0L67,0LNaN,0LNaN,0L728”

问题描述

我正在尝试创建折线图，但出现错误...

错误：属性 d：预期数字，“M67,0L67,0LNaN,0LNaN,0L728”

...每次我有三个或更多元素。我想在 x 轴上设置该格式的日期。我尝试过随时间缩放，但我只想显示 JSON 文件包含的日期，而不是日期范围。

这是我正在使用的 JSON 文件：

[{"date": "20-Jun-19", "close": "5", "text": "Test"}, 
 {"date": "21-Jun-19", "close": "5", "text": "Test"}, 
 {"date": "25-Jun-19", "close": "5", "text": "Test"}]

这是我正在使用的 Javascript。

var label = d3.select(".label");
var margin = {top: 30, right: 20, bottom: 30, left: 50},
width = 1460 - margin.left - margin.right,
height = 870 - margin.top - margin.bottom;

var x = d3.scale.ordinal()
        .rangeRoundBands([0, width], .1);
var y = d3.scale.linear().range([height, 0]);

// Define the axes
var xAxis = d3.svg.axis().scale(x)
    .orient("bottom").ticks(20);

var yAxis = d3.svg.axis().scale(y)
    .orient("left").ticks(15);

// Define the line
var valueline = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.close); });

// Adds the svg canvas
var svg = d3.select(".anxiety-graphic")
    .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + 
")");

d3.json("data.json", function(error, data) {
    var categoriesNames = data.map(function (d) {
        return +d.date;
    });
x.domain(categoriesNames);
    // Scale the range of the data
x.domain(d3.extent(data, function(d) { console.log(d); return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.close; })]);

// Add the valueline path.
svg.append("path")      // Add the valueline path.
    .attr("class", "line")
    .attr("d", valueline(data));

    // Add the valueline path.

    svg.selectAll("circle")
    .data(data)
    .enter()
    .append("circle")
    .attr("r", 10)
  .attr("cx", function(d) {
    return x(d.date)
  })
  .attr("cy", function(d) {
    return y(d.close)
  })
  .on("mouseover", function(d,i) {

   label.style("transform", "translate("+ x(d.date) +"px," + (y(d.close)) +"px)")
   label.text(d.close)

});

// Add the X Axis
svg.append("g")         // Add the X Axis
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

// Add the Y Axis
svg.append("g")         // Add the Y Axis
    .attr("class", "y axis")
    .call(yAxis);

});

标签： javascriptd3.js

解决方案

无论出于何种原因，您正在替换正确的域...

x.domain(categoriesNames);

...对于下一行中的错误：

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

d3.extent返回一个仅包含 2 个值的数组，这就是为什么当您的数据具有三个或更多元素时会出现此问题。

此外，用于创建的地图categoriesNames存在问题：

var categoriesNames = data.map(function (d) {
    return +d.date;
});

由于 thedate是一个包含字母的字符串，因此不清楚为什么要使用一元加号（它将返回NaN）。放弃：

var categoriesNames = data.map(function (d) {
    return d.date;
});

这是您进行这些更改的代码：

var label = d3.select(".label");
var margin = {
    top: 30,
    right: 20,
    bottom: 30,
    left: 50
  },
  width = 1460 - margin.left - margin.right,
  height = 870 - margin.top - margin.bottom;

var x = d3.scale.ordinal()
  .rangeRoundBands([0, width], .1);
var y = d3.scale.linear().range([height, 0]);

// Define the axes
var xAxis = d3.svg.axis().scale(x)
  .orient("bottom").ticks(20);

var yAxis = d3.svg.axis().scale(y)
  .orient("left").ticks(15);

// Define the line
var valueline = d3.svg.line()
  .x(function(d) {
    return x(d.date);
  })
  .y(function(d) {
    return y(d.close);
  });

// Adds the svg canvas
var svg = d3.select("body")
  .append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top +
    ")");

var data = [{
    "date": "20-Jun-19",
    "close": "5",
    "text": "Test"
  },
  {
    "date": "21-Jun-19",
    "close": "5",
    "text": "Test"
  },
  {
    "date": "25-Jun-19",
    "close": "5",
    "text": "Test"
  }
];

var categoriesNames = data.map(function(d) {
  return d.date;
});
x.domain(categoriesNames);

y.domain([0, d3.max(data, function(d) {
  return d.close;
})]);

// Add the valueline path.
svg.append("path") // Add the valueline path.
  .attr("class", "line")
  .attr("d", valueline(data));

// Add the valueline path.

svg.selectAll("circle")
  .data(data)
  .enter()
  .append("circle")
  .attr("r", 10)
  .attr("cx", function(d) {
    return x(d.date)
  })
  .attr("cy", function(d) {
    return y(d.close)
  })
  .on("mouseover", function(d, i) {

    label.style("transform", "translate(" + x(d.date) + "px," + (y(d.close)) + "px)")
    label.text(d.close)

  });

// Add the X Axis
svg.append("g") // Add the X Axis
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

// Add the Y Axis
svg.append("g") // Add the Y Axis
  .attr("class", "y axis")
  .call(yAxis);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>

推荐阅读