CODEWITHSUNDEEP
javascriptd3.js
lbs0912
lbs0912

Reputation: 331

"d3.interpolators.push()" is not defined in D3.js v4.0, which function can replace it?

I write a program using D3.js and encounter an error.

main.js:1 Uncaught TypeError: Cannot read property 'push' of undefined

I refer D3.js Github Page, d3.interpolators.push() is OK in D3.js v3.X, but it does not work in D3.js. How should I modify it?

Here is my code.

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

<script>
d3.interpolators.push(function(a,b){
    var re = /^\$([0-9,.])+$/;
    var ma,mb;
    var f = d3.format(",.02f");

    if((ma = re.exec(a)) && (mb = re.exec(b))) { 
        a = parseFloat(ma[1]);
        b = parseFloat(mb[1]) - a;
        return function(t) {
            return "$"+ f(a+b*t);
        }
    }   
});
</script>

Upvotes: 2

Views: 299

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102198

That method doesn't work in D3 v4.x anymore. According to the documentation:

The d3.interpolate method no longer delegates to d3.interpolators, which has been removed; its behavior is now defined by the library.

Using D3 v4.x, you'll have to define the interpolation using scale.interpolate.

That piece of code you pasted is from Nick Zhu's book, "Data Visualization with D3 Cookbook" (but the regex is wrong). So, in the following demo, I just copied Zhu's code, setting the interpolator like this:

var dollarScale = d3.scaleLinear()
.domain([0, 13])
.range(["$0", "$300"])
.interpolate(
    function(a, b) {
        var re = /^\$([0-9,.]+)$/;
        var ma, mb;
        var f = d3.format(",.02f");

        if ((ma = re.exec(a)) && (mb = re.exec(b))) {
            a = parseFloat(ma[1]);
            b = parseFloat(mb[1]) - a;
            return function(t) {
                return "$" + f(a + b * t);
            }
        }
    }
);

Here is the demo:

var dollarScale = d3.scaleLinear()
    .domain([0, 13])
    .range(["$0", "$300"])
    .interpolate(
        function(a, b) {
            var re = /^\$([0-9,.]+)$/;
            var ma, mb;
            var f = d3.format(",.02f");

            if ((ma = re.exec(a)) && (mb = re.exec(b))) {
                a = parseFloat(ma[1]);
                b = parseFloat(mb[1]) - a;
                return function(t) {
                    return "$" + f(a + b * t);
                }
            }
        }
    );

function render(scale, selector) {
    var data = [];
    var max = scale.domain()[1];

    for (var i = 0; i < max; ++i) data.push(i);

    d3.select(selector).selectAll("div.cell")
        .data(data)
        .enter()
        .append("div")
        .classed("cell", true)
        .append("span");

    d3.select(selector).selectAll("div.cell")
        .data(data)
        .exit().remove();

    d3.select(selector).selectAll("div.cell")
        .data(data)
        .style("display", "inline-block")
        .select("span")
        .text(function(d, i) {
            return scale(d);
        }); // <-N
}

render(dollarScale, "#dollar");
.cell {
    min-width: 40px;
    min-height: 20px;
    margin: 5px;
    float: left;
    text-align: center;
    border: #969696 solid thin;
    padding: 5px;
}

.fixed-cell {
    min-width: 40px;
    min-height: 20px;
    margin: 5px;
    position: fixed;
    text-align: center;
    border: #969696 solid thin;
    padding: 5px;
}
<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="dollar" class="clear">
    <span>Custom Dollar Interpolation<br></span>
</div>

Upvotes: 3

Related Questions