在d3中调用自定义函数

Calling a custom function in d3

本文关键字:自定义函数 调用 d3      更新时间:2023-09-26

我正在尝试这个教程,我根本无法获得x(d)。在我使用x(d)之前,其他的都很好。我甚至尝试复制和粘贴这个页面的源代码。

问题是使用x(d),因为如果使用常数而不是x(d),一切都可以工作。我错过了什么?

    <div class="chart"></div>
    <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 x(d) + "px";
                })
                .text(function (d) {
                    return d;
                });
    </script>

看完后:https://github.com/d3/d3/blob/master/CHANGES.md#scales-d3-scale

试试这个:

        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 x(d) + "px";
                })
                .text(function (d) {
                    return d;
                });

    <div class="chart"></div>
    <script src="//d3js.org/d3.v4.min.js"></script>
    <script>