У меня есть небольшая проблема с моей домашней страницей. Сначала я новичок в программировании, и я пытаюсь научить себя около 2 месяцев. Поэтому, пожалуйста, подумайте об этом, когда увидите, что я сделал до сих пор ;-)Интеграция D3-диаграммы в существующий HTML-сайт
Ну, в чем проблема. У меня есть сайт php для подключения к моему SQL-серверу и для сбора информации, которую я собираю в массивах.
Кроме того, я создал HTML-часть под кодом PHP, где закодирована моя Домашняя страница. Когда я добрался до точки, где хотел визуализировать данные из раздела PHP, я ввел D3-скрипт в мою существующую часть HTML, надеюсь, что график появится только там, где я его разместил. Но на самом деле это совсем не так. Вот мой HTML-код с d3-скриптом. Единственное, что я вижу, все равно без главной страницы графика.
Есть ли проблема с визуализацией или график за моей страницей в фоновом режиме? И как я могу заставить его появиться. Заранее спасибо!
Здесь HTML-код:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Lorem ipsum</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container" class="shadow">
<header>
<img src="images/logo_portfolio.png" width="126" height="74" alt="Lorem ipsum" class="floatleft Lorem" />
<img src="images/Uni_Logo.png" width="35%" height="35%" alt="Lorem ipsum" class="floatright Ipsum" />
<br><br><br><p class="tagline">Lorem Ipsum</p>
<br><p class="title">Fahrspuranalyse</p>
</header>
<section id="content">
<h1>Fahrspuranalyse: Patentpool</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<script>
// ------------- Variablen für Fahrspur 1 ----------------
var StartpatentFS1 = <?php echo json_encode($Number[0], JSON_NUMERIC_CHECK); ?>;
var AnzahlPatenteFS1 = <?php echo json_encode($GesamtPatenteFS1, JSON_NUMERIC_CHECK); ?>;
// ------------- Variablen für Fahrspur 2 ----------------
var StartpatentFS2 = <?php echo json_encode($StartpatentNrFS2, JSON_NUMERIC_CHECK); ?>;
var AnzahlPatenteFS2 = <?php echo json_encode($GesamtPatenteFS2, JSON_NUMERIC_CHECK); ?>;
// ------------- Variablen für Fahrspur 3 ----------------
var StartpatentFS3 = <?php echo json_encode($StartpatentNrFS3, JSON_NUMERIC_CHECK); ?>;
var AnzahlPatenteFS3 = <?php echo json_encode($GesamtPatenteFS3, JSON_NUMERIC_CHECK); ?>;
// ------------- Array mit allen Fahrspurinformationen (Länge und Beschriftung) ----------------
var ArrayAnzahlPatente = [AnzahlPatenteFS1, AnzahlPatenteFS2, AnzahlPatenteFS3]; // Array für die Balkenlänge
var Fahrspuren_name = [StartpatentFS1, StartpatentFS2, StartpatentFS3]; // Array für die Balkenbezeichnung
var width = 700;
var height = ArrayAnzahlPatente.length * 50 + 50;
var padding = 50;
var widthScale = d3.scale.linear()
.domain([0, d3.max(ArrayAnzahlPatente)])
.range([0, 500]);
var axis = d3.svg.axis()
.scale(widthScale)
.tickFormat(d3.format())
.ticks(5)
.orient("bottom");
var canvas = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height + padding)
.append("g")
.attr("transform", "translate(20, 50)");
var bars = canvas.selectAll("rect")
.data(ArrayAnzahlPatente)
.enter()
.append("rect")
.attr("width", 0)
.attr("height", 48)
.attr("fill", "orange")
.attr("y", function (d, i) { return i * 50 })
.transition()
.delay(400)
.duration(1600)
.attr("width", function(d) { return widthScale (d) })
.attr("height", 48);
canvas.selectAll("text")
.data(Fahrspuren_name)
.enter()
.append("text")
.transition()
.delay(1800)
.ease("linear")
.text(function(d) { return d; })
.attr("x", function(d) { return (10); })
.attr("y", function(d, i) { return i * 50 + 30})
.attr("font-family", "sans-serif")
.attr("font-size", "14px")
.attr("fill", "black");
console.log(ArrayAnzahlPatente);
console.log(Fahrspuren_name);
canvas.append("g")
.attr("transform", "translate(0," + (height - padding) + ")")
.call(axis);
</script>
<form class="pure-form" action="Fahrspuranalyse_Patentpool.php" form style="text-align:center">
<input type="submit" class="pure-button pure-button-primary" value="Zurück">
</form>
</section>
<footer>
<p>© Lorem ipsum - 2015</p>
</footer>
</div>
</body>
/EDIT: Я обнаружил, что проблема IST сниппета: <div id="container" class="shadow">
Как я могу убедиться, что диаграмма будет на этот контейнер, а не ниже?
спасибо. Я должен признать, что вчера я переключился на другое решение, так как нашел диаграммы googles очень легкими и гибкими для моих нужд. Поэтому я не могу проверить это, чтобы решить проблему вообще. Но благодаря вашей обратной связи я получил лучшее представление о том, как работают работы. –
Нет проблем. Карты Google очень просты в использовании, и есть активный форум, который вы найдете связанным на главном сайте, поэтому хороший выбор. Удачи! – danabnormal