Question

我的主页遇到了一些问题。起初：我是编程的新手，我现在正在努力教我2个月。因此，当你看到我到目前为止所做的事情时，请考虑这个;-)

嗯，问题是什么。我有一个php站点连接到我的SQL-Server并收集我在数组中收集的信息。

另外，我在我的主页编码的PHP代码下创建了一个HTML部分。当我想要从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>&copy; Lorem ipsum - 2015</p>        
</footer>

</div>
</body>

/编辑：我发现问题出现在代码段中：<div id="container" class="shadow">

如何确保图表位于此容器上而不是下方？

Answer 1

一些事情......

var canvas = d3.select("body").append("svg")

此行正如读取的那样 - 您将图形附加到网页正文，因此它将显示在最后一个要绘制的元素之后。

脚本不会按照您的想法执行。仅仅因为脚本位于页面的那一部分并不意味着它将在该部分中执行 - 并且其输出被绘制。

我上面指出的一行是告诉脚本在页面上绘制图表的位置，所以如果你在你想要绘制图表的页面上添加一个div：

<div id="chart"></div>

...然后更改您的行以引用它...

var canvas = d3.select("#chart").append("svg")

......你应该开始到达某个地方。

我还没有验证您的其他代码，但希望这有助于您找到正确的方向。

将D3-Chart集成到现有的HTML站点中

1 个答案: