Question

当我正在通过freeCodCamp前端轨道进展时，我正在研究番茄钟时钟（会话长度，中断长度）。我有一些设计，但为此我必须学习d3.js.我明白我必须提供minimun和maximun以及开始和结束颜色，然后让插值完成。

使用此插件：https://github.com/d3/d3-interpolate

<!DOCTYPE html>
<html lang="eng">
    <head>
        <meta charset="utf-8">
        <title>D3 test</title>
        <script type="text/javascript" src="d3/d3.v3.js"></script>
        <script type="text/javascript" src="d3/d3-interpolate.js"></script>
        <link rel="stylesheet" href="main.css">
    </head>
    <body>
    <script type="text/javascript">



        var dataset = [25, 7, 5, 26, 11, 8, 25, 14, 23, 19,
            14, 11, 22, 29, 11, 13, 12, 17, 18, 10,
            24, 18, 25, 9, 3];


        var color = d3.scale.linear()
            .domain([3, 29])
            .range(["#FDFFCB", "#232942"])
            .interpolate(d3.interpolateHcl);


        d3.select("body").selectAll("div")
            .data(dataset)
            .enter()
            .append("div")
            .attr("class", "bar")
            .style("height", function(d){
                var barHeight = d * 5;
                return barHeight + "px";
            });
            .style("color", function(d) {
                return color(d) });
        })




        console.log(d3.selectAll("div"))

    </script>

    </body>
</html>

这不起作用。我做错了什么？

Answer 1

该minilibrary是D3 v4.x的一部分，而不是D3 v3。正如您在链接的页面中看到的那样：

您也可以直接从d3js.org加载，作为独立库或 D3 4.0 的一部分。（强调我的）

由于您使用的是D3 v3.x，因此不需要它。

另外，在设置div的样式时，将color更改为background-color。

以下是您使用该更改的工作代码：

var dataset = [25, 7, 5, 26, 11, 8, 25, 14, 23, 19,
  14, 11, 22, 29, 11, 13, 12, 17, 18, 10,
  24, 18, 25, 9, 3
];

var color = d3.scale.linear()
  .domain([3, 29])
  .range(["#FDFFCB", "#232942"])
  .interpolate(d3.interpolateHcl);

d3.select("body").selectAll("div")
  .data(dataset)
  .enter()
  .append("div")
  .attr("class", "bar")
  .style("height", function(d) {
    var barHeight = d * 5;
    return barHeight + "px";
  })
  .style("background-color", function(d) {
    return color(d)
  });

<script src="https://d3js.org/d3.v3.min.js"></script>

d3.js插值不起作用

1 个答案: