创建 Line D3.js 图表时出错

Question

Js 折线图，我可以绘制图表。当我使用 json 数据时，我得到了：

错误：无法读取 null(...) 的属性“长度”

我的功能是这样的。我在解析数据时遇到错误。我得到了正确的 json 响应，但我可以绘制图表。谁能告诉我我做错了什么？

                var margin = { top: 30, right: 20, bottom: 30, left: 50 },
               width = 600 - margin.left - margin.right,
               height = 270 - margin.top - margin.bottom;

                // Parse the date / time
                var parseDate = d3.time.format("%d-%b-%y").parse;


                // Set the ranges
                var x = d3.time.scale().range([0, width]);
                var y = d3.scale.linear().range([height, 0]);

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

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

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

                // Adds the svg canvas
                var svg = d3.select("linegrapg")
                    .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 dataset = [{"dategraph":"16-Nov-16","assetcount":299},{"dategraph":"19-Nov-16","assetcount":0},
                 {"dategraph":"08-Nov-16","assetcount":18},{"dategraph":"14-Nov-16","assetcount":10},
                 {"dategraph":"17-Nov-16","assetcount":2},{"dategraph":"18-Nov-16","assetcount":0}]
                data = JSON.parse(dataset.d);
                    data.forEach(function (d) {
                        d.Letter = parseDate(d.dategraph);
                        d.Freq = +d.assetcount;
                    });

                    // Scale the range of the data
                    x.domain(d3.extent(data, function (d) { return d.Letter; }));
                    y.domain([0, d3.max(data, function (d) { return d.Freq; })]);

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

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

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

            }

        }

Answer 1

根据您的问题，代码通过注释掉 JSON.parse 函数调用和两个尾随花括号来运行。 data 变量已经是一个对象数组，因此无需对其进行反序列化（从字符串类型）。除此之外，我无法重现您遇到的错误。看看下面的代码 sn-p。

 var margin = {
     top: 30,
     right: 20,
     bottom: 30,
     left: 50
   },
   width = 600 - margin.left - margin.right,
   height = 270 - margin.top - margin.bottom;

 // Parse the date / time
 var parseDate = d3.time.format("%d-%b-%y").parse;


 // Set the ranges
 var x = d3.time.scale().range([0, width]);
 var y = d3.scale.linear().range([height, 0]);

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

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

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

 // 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 = [{
   "dategraph": "16-Nov-16",
   "assetcount": 299
 }, {
   "dategraph": "19-Nov-16",
   "assetcount": 0
 }, {
   "dategraph": "08-Nov-16",
   "assetcount": 18
 }, {
   "dategraph": "14-Nov-16",
   "assetcount": 10
 }, {
   "dategraph": "17-Nov-16",
   "assetcount": 2
 }, {
   "dategraph": "18-Nov-16",
   "assetcount": 0
 }];

 //var data = JSON.parse(dataset);

 data.forEach(function(d) {
   d.Letter = parseDate(d.dategraph);
   d.Freq = +d.assetcount;
 });

 // Scale the range of the data
 x.domain(d3.extent(data, function(d) {
   return d.Letter;
 }));
 y.domain([0, d3.max(data, function(d) {
   return d.Freq;
 })]);

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

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

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

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

Answer 2

我的带有工具提示的工作示例

<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */

body { font: 12px Arial;}

path { 
    stroke: steelblue;
    stroke-width: 2;
    fill: none;
}

.axis path,
.axis line {
    fill: none;
    stroke: grey;
    stroke-width: 1;
    shape-rendering: crispEdges;
}

div.tip {   
       position: absolute;          
    text-align: center;         
    width: auto;            
    height: auto;               
    padding: 2px;               
    font: 12px sans-serif;      
    background: black;  
    border: 0px;        
    border-radius: 8px;         
    pointer-events: none;   
    color:white;        
    border-radius: 8px 8px 8px 8px; 
}

</style>
<body>

<!-- load the d3.js library -->    
<script src="http://d3js.org/d3.v3.min.js"></script>

<script>

// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 20, bottom: 30, left: 50},
    width = 600 - margin.left - margin.right,
    height = 270 - margin.top - margin.bottom;

// Parse the date / time
var parseDate = d3.time.format("%d-%b-%y").parse;
var formatTime = d3.time.format("%e %B");

// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);

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

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

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

// Define the div for the tooltip
var div = d3.select("body").append("div")   
    .attr("class", "tip")               
    .style("opacity", 0);

// 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 + ")");

// Get the data
  var data = [
                  {"date":"08-Nov-16","close":299},
                  {"date":"09-Nov-16","close":10},
                  {"date":"10-Nov-16","close":18},
                  {"date":"11-Nov-16","close":10},
                  {"date":"12-Nov-16","close":2},
                  {"date":"13-Nov-16","close":50}];
    data.forEach(function(d) {
        d.date = parseDate(d.date);
        d.close = +d.close;
    });

    // Scale the range of the data
    x.domain(d3.extent(data, function(d) { return d.date; }));
    y.domain([0, d3.max(data, function(d) { return d.close; })]);

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

    // Add the scatterplot
    svg.selectAll("dot")    
        .data(data)         
    .enter().append("circle")                               
        .attr("r", 5)       
        .attr("cx", function(d) { return x(d.date); })       
        .attr("cy", function(d) { return y(d.close); })     
        .on("mouseover", function(d) {      
            div.transition()        
                .duration(200)      
                .style("opacity", .9);      
            div .html(formatTime(d.date) + "<br/>"  + d.close)  
                .style("left", (d3.event.pageX) + "px")     
                .style("top", (d3.event.pageY - 28) + "px");    
            })                  
        .on("mouseout", function(d) {       
            div.transition()        
                .duration(500)      
                .style("opacity", 0);   
        });

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

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



</script>
</body>