Question

我在下面的HTML网页中基于此教程：https://bl.ocks.org/mbostock/7322386。但是，没有显示折线图，并且控制台中没有错误。当我取消对部分d3.scale.linear的注释时，出现错误：

未捕获的TypeError：无法读取未定义的属性'linear'

当我仅使用D3.js代码时：

d3.select("body").style("background-color", "black");

它确实显示为黑色背景，因此该库似乎已正确加载。

我在做什么错了？

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="nl">
  <head><title>
    Clans
</title><meta name="ir-site-verification-token" value="-195280166" /><meta name="robots" content="INDEX,FOLLOW" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />

    <!-- fix for IE9, used to be IE=8 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
    <script>
        WebFont.load({
            google: {
                families: ['Ropa+Sans', 'Roboto+Slab:400,700', 'Raleway:400,600,700']
            }
        });
    </script>

    <link rel="stylesheet" type="text/css" href="//www.example.com/css/custom-theme/jquery-ui-1.10.1.custom.min.css" />


    <script type="text/javascript" src="//www.example.com/js/jquery-3.3.1.min.js"></script>
    <script async type="text/javascript" src="//www.example.com/js/jquery-ui.1.12.1.min.js"></script><!-- no tabs / sortable -->
    <script type="text/javascript" src="//www.example.com/js/_genfuncs.js?v=3"></script>

    <script src="https://kit.fontawesome.com/4667210565.js"></script> 

    <link href="//fonts.googleapis.com/css?family=Muli" rel="stylesheet" /><link href="//fonts.googleapis.com/css?family=Ropa+Sans" rel="stylesheet" type="text/css" /><link rel="stylesheet" href="/css/master.min.css?v=4" /><link rel="stylesheet" href="/css/elements.min.css?v=4" />
<link rel="stylesheet" href="/css/widepage.min.css?v=1" />

    <style type="text/css">
textarea {
    padding:9px 10px;
    margin:15px 0 0 0;
    border:1px solid #dcdcdc;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    background:#ffffff;
    font-family:"Helvetica", "Helvetica Cond", "Helvetica Light";
    color:#808080;
    font-size:12px;
    display:inline-block;
    width:48%;
}

    </style>

    <script type="text/javascript">

        $(document).ready(function () {

        });





    </script>


<link rel='shortcut icon' href='http://www.example.com/favicon.ico' /><meta name="description" content="Clans" /></head>

<body>




    <form method="post" action="/stats?id=1" id="aspnetForm" class="container widepage noaside">

<input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" />
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="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" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['aspnetForm'];
if (!theForm) {
    theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>


<script src="/WebResource.axd?d=pynGkmcFUV13He1Qd6_TZKxpy8cVm_uOVc7XrGjppxClg--QUW-Yzd0cRHOLeRa5X9eOyLPmx5Zp-FshJzK9xw2&amp;t=637100842445053551" type="text/javascript"></script>

<script src="Scripts/WebForms/MsAjax/MicrosoftAjaxWebForms.js" type="text/javascript"></script>
<div class="aspNetHidden">

    <input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="FD168CE9" />
    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="2GoBU7BbJAUbxfaIODmL1sN3K3W2wZAw4C9V3wtaCDWcHyp4LVl4/DlpWDVx3l2M3X9E5tYjhHkO8JhJPfwHtuOnf5nfz29swAn9jCZQcpRr+LESrLjz6CsKx4yxZV2o" />
</div>

    <script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$scrmgrDefault', 'aspnetForm', [], [], [], 90, 'ctl00');
//]]>
</script>


    <header>


   </header>

   <nav>        
        <ul class="menu horizontal">
            <li><a id="hlHome" title="" href="/">Home</a></li>
            <ul></ul></li>

        </ul>   
   </nav>





   <section id="pagemeta">

   </section>





    <main>


<style type="text/css">
.chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
}
</style>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>

    var data = [4, 8, 15, 16, 23, 42];
    //var x = d3.scale.linear()
    //    .domain([0, d3.max(data)])
    //    .range([0, 420]);

    d3.select(".chart")
        .selectAll("div")
        .data(data)
        .enter().append("div")
        .style("width", function (d) { return d * 10 + "px"; })
        .text(function (d) { return d; });

</script>

    chart is below here
    <div class="chart"></div>



<p></p>
<p></p>

<br />




    </main>


   <aside id="aside">

   </aside>


    </form>


    <script type="text/javascript">

        (function(w, d){
            var b = d.getElementsByTagName('body')[0];
            var s = d.createElement("script"); s.async = false;
            var v = !("IntersectionObserver" in w) ? "8.7.1" : "10.5.2";
            s.src = "https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/" + v + "/lazyload.min.js";
            w.lazyLoadOptions = {}; // Your options here. See "recipes" for more information about async.
            b.appendChild(s);
        }(window, document));

    </script>
    <script>
    window.onload = function() {
        //new LazyLoad();
        var myLazyLoad = new LazyLoad({
            elements_selector: ".lazy"
        });
    }   
    </script>


</body>
</html>

Answer 1

出现错误的原因是d3.scale.linear()用于版本3，但是，您正在使用版本5。

对于版本4和5，方法现在为d3.scaleLinear()。更改该行代码即可解决问题，或者，您也可以将库导入从https://d3js.org/d3.v5.min.js更改为https://d3js.org/d3.v3.min.js。

您需要做的另一件事是将div类行移到javascript上方，如下所示：

chart is below here

<div class="chart"></div>

<script>
var data = [4, 8, 15, 16, 23, 42];
// var x = d3.scale.linear() <- version 3
var x = d3.scaleLinear() // <- version 4 or 5
    .domain([0, d3.max(data)])
    .range([0, 420]);

d3.select(".chart")
    .selectAll("div")
    .data(data)
    .enter().append("div")
    .style("width", function (d) { return d * 10 + "px"; })
    .text(function (d) { return d; });
</script>

完成这两项更改后，现在应该会出现一个图形。

D3js教程未在控制台中显示任何图形且没有错误

1 个答案: