Question

我正在尝试构建一个绘制一些图表的剃须刀页面。渲染剃刀后，生成的Js类似于此：

<div id="chart"></div>
...
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
    var jsonData = [{"date":"2017-11-30T00:00:00","Price":99.4 ... },{"date":"2017-12-01T00:00:00","Price":100.05}[

    // Use the margin convention practice 
    var margin = {top: 50, right: 50, bottom: 50, left: 50}
        , width = window.innerWidth - margin.left - margin.right // Use the window's width 
        , height = window.innerHeight - margin.top - margin.bottom; // Use the window's height

    // X scale will use the index of our data
    var xScale = d3.scaleTime()
        .domain([new Date(2017, 08, 1), new Date(2019, 11, 1)])// input
        .range([0, width]); // output

    // Y scale will use the randomly generate number 
    var yScale = d3.scaleLinear()
        .domain([0, 150]) // input 
        .range([height, 0]); // output 

    // d3's line generator
    var line = d3.line()
        .x(function(d, i) { return xScale(d.date); }) // set the x values for the line generator
        .y(function(d) { return yScale(d.Price); }) // set the y values for the line generator 
        .curve(d3.curveMonotoneX) // apply smoothing to the line

    // An array of objects of length N. Each object has key -> value pair, the key being "y" and the value is a random number
    // var dataset = d3.range(n).map(function(d) { return {"y": d3.randomUniform(1)() } })

    // Add the SVG to the page and employ #2
    var svg = d3.select("#chart").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 + ")");

    // Call the x axis in a group tag
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(xScale)); // Create an axis component with d3.axisBottom

    // Call the y axis in a group tag
    svg.append("g")
        .attr("class", "y axis")
        .call(d3.axisLeft(yScale)); // Create an axis component with d3.axisLeft

    // Append the path, bind the data, and call the line generator 
    svg.append("path")
        .datum(jsonData) // 10. Binds data to the line 
        .attr("class", "line") // Assign a class for styling 
        .attr("d", line); // 11. Calls the line generator

在IE / Chrome浏览器中，我可以看到轴，但没有图。我还可以看到它的路径格式错误，并且我认为日期存在问题，但是我无法弄清楚问题是什么

<path class="line" d="MNaN,242.20533333333327CNaN,NaN,NaN,NaN,NaN,239.0940000 ...

在Firefox中，它仅显示轴，没有任何错误有什么想法会发生什么吗？

谢谢！

Answer 1

尝试将.highlight .err { border: inherit; box-sizing: inherit; }替换为"2017-11-30T00:00:00"，以防止new Date(2017, 11, 30)。

d3-time-format也可用于解析日期字符串。

D3.JS V5：错误：<path>属性d：预期数字“ MNaN，242.20533333…”

1 个答案: