Я не могу загрузить диаграмму разброса javascript в любом браузере - PullRequest
Новая
       77

Я не могу загрузить диаграмму разброса javascript в любом браузере

0 голосов
/ 16 июня 2020

Недавно, возможно, после обновления Java, я не могу загрузить диаграмму рассеяния в Chrome, Firefox или Inte rnet Explorer.

Один месяц go, все загружен нормально. Я не знаю, что случилось. Я обновил Java до последней версии и включил ActiveX в параметрах Inte rnet, но у меня ничего не работает.

Я вставлю код 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>

1 Ответ

0 голосов
/ 16 июня 2020

Похоже, основная проблема в том, что код неправильно отформатирован.

Многие комментарии смешиваются с кодом, вызвавшим синтаксические ошибки.

Я пытаюсь отформатировать код и исправить их ошибок.

Так как у нас нет вашего файла 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...