Question

我正在关注official教程。由于结构非常简陋，我决定做一个更清洁的结构：

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<head>
<title>D3</title>
<style>
    .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.v4.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>
</head>
<body>

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

</body>
</html>

但这不起作用。这是我得到的错误：

d3.html:20 Uncaught TypeError: Cannot read property 'linear' of undefined

我在D3 api中发现方法scale.linear现在使用scaleLinear调用。

输出错误消失了，但我仍然看不到任何东西，而用scale.mpract旧方法复制示例。

我做错了什么？

Answer 1

您的脚本位于head上，并且在div之前使用类＆＃34;图表＆＃34;进行解析。正在生成。

只需将所有脚本移到body的末尾，在选择的div之后：

＆＃13;

.chart div {
        font: 10px sans-serif;
        background-color: steelblue;
        text-align: right;
        padding: 3px;
        margin: 1px;
        color: white;
    }

＆＃13;

<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<div class="chart"></div>
<script>
  var data = [4, 8, 15, 16, 23, 42];

    var x = d3.scaleLinear()
        .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>
</body>

＆＃13;

如果您想将脚本保留在head中，无论出于何种原因，只需更改d3.select(".chart")的{{1}}：

＆＃13;

d3.select("body")

＆＃13;

div {
        font: 10px sans-serif;
        background-color: steelblue;
        text-align: right;
        padding: 3px;
        margin: 1px;
        color: white;
    }

＆＃13;

简单的D3演示不适用于改变的结构

1 个答案: