Question

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

错误：属性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);

});

Answer 1

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

rect

...在下一行中输入错误：

In simple terms, index() method finds the given element in a list and returns its position.

However, if the same element is present more than once, index() method returns its smallest/first position.

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

此外，用于创建hour_ex = [] for idx, temper in enumerate(temperatures): if temper > 70: hour_ex.append(idx) print(hour_ex)的地图存在问题：

x.domain(categoriesNames);

由于x.domain(d3.extent(data, function(d){ return d.date; }));是一个包含字母的字符串，因此不清楚您为什么要使用一元加号（它将返回d3.extent）。删除：

categoriesNames

这是您所做的更改的代码：

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

date

错误：<路径>属性d：期望的数字，“ M67,0L67,0LNaN，0LNaN，0L728”

1 个答案: