我无法在任何浏览器中加载JavaScript散点图

问题描述 投票：0回答：1

最近，也许在更新Java之后，我无法在Chrome，Firefox或Internet Explorer上加载散点图。

一个月前，一切正常。我不知道发生了什么我已经将Java更新到最新版本，并在Internet选项上启用了ActiveX，但是对我来说没有任何用。

我将粘贴html代码。它使用保存在同一文件夹中的csv文件加载点信息：

<!DOCTYPE html> <meta charset="utf-8"> <style>
body { font: 12px Arial;}
.axis path, .axis line { fill: none; stroke: grey; stroke-width: 1;
shape-rendering: crispEdges; }
</style> <body>
<script src="http://d3js.org/d3.v4.js"></script> <script>
// Set the dimensions of the canvas / graph var margin = {top: 30, right: 20, bottom: 50, left: 60}, width = 900 - margin.left - margin.right, height = 360 - margin.top - margin.bottom;
// Parse the date / time
var parseDate = d3.timeParse("%a %b %d %H:%M:%S %Z %Y "); // Set the ranges
var y = d3.scaleTime().range([height, 0]); var x = d3.scaleLinear().range([0, width]);
// Define the axes
var xAxis = d3.axisBottom().scale(x) .ticks(5);
var yAxis = d3.axisLeft().scale(y)
.ticks(5);
// 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
d3.csv("data.csv", function(error, data) { var max = data.length; console.log(max)
data.forEach(function(d, i) { d.dateParsed = parseDate(d.date); d.close = max - i;
}); // Scale the range of the data
y.domain(d3.extent(data, function(d) { return d.dateParsed; })); x.domain([0, d3.max(data, function(d) { return d.close; })]);
// Add the scatterplot svg.selectAll("dot") .data(data)
.enter().append("circle") .attr("r", 0.5)
.attr("fill","#2980B9")
.attr("cy", function(d) { return y(d.dateParsed); }) .attr("cx", function(d) { return x(d.close); });
svg.append("g") .attr("class", "x axis")
.attr("transform", "translate(0," + height + ")") .call(xAxis);
svg.append("text") .attr("class", "x label") .attr("text-anchor", "middle") .attr("x", width / 2) .attr("y", height + 40) .text("followers");
svg.append("g")
.attr("class", "y axis") .call(yAxis);
svg.append("text") .attr("class", "y label") .attr("text-anchor", "middle") .attr("x", -height / 2 ) .attr("y", -50)
.attr("transform", "rotate(-90)") .text("account creation date");
});
</script> </body>
javascript google-chrome internet-explorer-11 activex scatter-plot
1个回答
0
投票

似乎主要问题是代码格式不正确。

许多注释与代码混合会导致语法错误。

我尝试格式化代码并尝试解决这些错误。

由于我们没有您的data.csv文件，因此我们无法加载该数据，但代码现在创建了图表。

您可以尝试在您的data.csv文件中使用此代码。这将帮助您正确加载图表。

<!DOCTYPE html> 
<html>
<head>
   <meta charset="utf-8">
   <style>
      body { font: 12px Arial;}
      .axis path, .axis line { fill: none; stroke: grey; stroke-width: 1;
      shape-rendering: crispEdges; }
   </style>
</head>
   <body>
      <script src="http://d3js.org/d3.v4.js"></script> <script>
         // Set the dimensions of the canvas / graph 
         var margin = {top: 30, right: 20, bottom: 50, left: 60}, width = 900 - margin.left - margin.right, height = 360 - margin.top - margin.bottom;
         // Parse the date / time
         var parseDate = d3.timeParse("%a %b %d %H:%M:%S %Z %Y "); // Set the ranges
         var y = d3.scaleTime().range([height, 0]); var x = d3.scaleLinear().range([0, width]);
         // Define the axes
         var xAxis = d3.axisBottom().scale(x) .ticks(5);
         var yAxis = d3.axisLeft().scale(y)
         .ticks(5);
         // 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
         d3.csv("data.csv", function(error, data) { var max = data.length; 
         console.log(max);
         data.forEach(function(d, i) { d.dateParsed = parseDate(d.date); d.close = max - i;
         }); 
     // Scale the range of the data
         y.domain(d3.extent(data, function(d) { return d.dateParsed; })); x.domain([0, d3.max(data, function(d) { return d.close; })]);
         // Add the scatterplot 
         svg.selectAll("dot") .data(data)
         .enter().append("circle") .attr("r", 0.5)
         .attr("fill","#2980B9")
         .attr("cy", function(d) { return y(d.dateParsed); }) .attr("cx", function(d) { return x(d.close); });
         svg.append("g") .attr("class", "x axis")
         .attr("transform", "translate(0," + height + ")") .call(xAxis);
         svg.append("text") .attr("class", "x label") .attr("text-anchor", "middle") .attr("x", width / 2) .attr("y", height + 40) .text("followers");
         svg.append("g")
         .attr("class", "y axis") .call(yAxis);
         svg.append("text") .attr("class", "y label") .attr("text-anchor", "middle") .attr("x", -height / 2 ) .attr("y", -50)
         .attr("transform", "rotate(-90)") .text("account creation date");
         });
      </script> 
   </body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.