d3.js - Integrating D3-Chart into existing HTML site -
i've got little problem homepage. @ first: i'm newbie @ programming , i`m trying teach myself 2 months now. please consider when see i've done till ;-)
well, what's problem. have php site connect sql-server , collect information gather in arrays.
also, have created html part under php code homepage coded. when got point wanted visualise data php-section entered d3-script existing html part in hope graph appear placed it. actually, doesn't @ all. here html code d3 script. thing see still without graph homepage.
is there problem visualisation or graph behind page in background? , how can make appear. in advance!
here html-code:
<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. @ 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. @ 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 * 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 * 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: found out problem ist snippet: <div id="container" class="shadow">
how can make sure chart on container , not below it?
a few things...
var canvas = d3.select("body").append("svg") this line doing reads - you're appending graphic body of webpage, appear after last element drawn.
scripts don't execute way think. because script in part of page doesn't mean executed - , output drawn - in section.
the line pointed @ above telling script draw chart on page, if add div page want chart drawn:
<div id="chart"></div> ...and change line reference it...
var canvas = d3.select("#chart").append("svg") ...you should start somewhere.
i haven't verified rest of code that'll in right direction.
Comments
Post a Comment