车把中的Javascript函数调用

Question

I am trying to use a javascript function call that creates a d3 pie chart in handlebars template.

Here is my script:-

<style>
#name {
    color: black;
    float: left;
    width: 34%;
}

#group {
    color: red;
    float: left;
    width: 33%;
}

#wave {
    color: green;
    float: left;
    width: 33%
}



#chart {
    width: 350px;
    padding: 10px;
}

#footer {
    color: blue;
    clear: both;
    text-align: center;
    padding: 5px;
}


#header {
    background-color: white;
    color: white;
    text-align: center;
    padding: 10px;
}
</style>
<div id="test"></div>

<script id="template" type="text/x-handlebars-template"> 
{{#each this}}

<div id="header">
        <div id="wave" style="color: #000FFF; font-size: 28px">Wave</div>
        <div id="name" style="color: #000000; font-size: 28px">{{name}}</div>
        <div id="group" style="color: #000000; font-size: 28px">{{groupName}}</div>
 </div>


<div id="table">
    <table>
    <tr>
        <td><div id="chart">{{recommendedFoods 25 25 25 25}}</div></td>
    </tr>
</table>
</div>
<div id="footer">
    Questions? Contact us 
</div>
{{/each}}
</script>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.0/mustache.min.js"></script>
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script>
<script>

 $(document).ready(function (){
     Handlebars.registerHelper("recommendedFoods", function(a,b,c,d) {
            var w = 200;
            var h = 200;
            var r = h / 2;
            d3.select("#chart").append("text").attr("text-anchor", "middle").style(
                    "font-size", "28px").style("text-decoration", "bold").text(
                    "Recommended");
            var color = d3.scale.ordinal().range(
                    [ "#ffe5ff", "#ffeee5", "#d0743c", "#ff8c00" ]);
            //GPVF
            var data = [ {
                "label" : "8",
                "value" : a
            }, {
                "label" : "3",
                "value" : b
            }, {
                "label" : "6",
                "value" : c
            }, {
                "label" : "2",
                "value" : d
            } ];

            var vis = d3.select('#chart').append("svg:svg").data([ data ]).attr(
                    "width", w).attr("height", h).append("svg:g").attr("transform",
                    "translate(" + r + "," + r + ")");
            var pie = d3.layout.pie().value(function(d) {
                return d.value;
            });

            // declare an arc generator function
            var arc = d3.svg.arc().outerRadius(r);

            // select paths, use arc generator to draw
            var arcs = vis.selectAll("g.slice").data(pie).enter().append("svg:g")
                    .attr("class", "slice");

            arcs.append("svg:path").attr("fill", function(d, i) {
                return color(i);
                // return color(d.data.value)
            }).attr("d", function(d) {
                console.log(arc(d));
                return arc(d);
            }).attr('stroke', '#fff') // <-- THIS
            .attr('stroke-width', '3');

            // add the text
            arcs.append("svg:text").attr("transform", function(d) {
                d.innerRadius = 0;
                d.outerRadius = r;
                return "translate(" + arc.centroid(d) + ")";
            }).attr("text-anchor", "middle").text(function(d, i) {
                return data[i].label;
            });
        //}
        return this;
        });

     var source = $("#template").html();
     var template = Handlebars.compile(source);
    var string = [{"groupName":"Default Group","name":"Dummy"},{"groupName":"New","name":"Becker"}];
    var ht = template(string);
    $("#test").html(ht);


});

</script>

The recommendedFoods function is being executed properly if I call it in the script without using it in the template. But , I am trying to return this in the function recommendedFood and I do not see anything being displayed on the output. Can anyone please help me fix this. What should be returned from the function so that it can be displayed using the handlebars

Answer 1

That's because by the time you call Handlebars helper there is no #chart element in the DOM yet.

So you need to:

1. change #chart to class .chart because you will have multiple elements
2. build your charts after Handlebars executes.
3. store values for your charts eg in the same strings object where you already have some relevant info.

Checkout demo - Fiddle .

Code:

$(document).ready(function() {

    var source = $("#template").html();
    var template = Handlebars.compile(source);
    var string = [{
        "groupName": "Default Group",
        "name": "Dummy",
        "values": [25, 25, 25, 25]
    }, {
        "groupName": "New",
        "name": "Becker",
        "values": [10, 5, 25, 25]
    }];
    var ht = template(string);
    $("#test").html(ht);

    $('.chart').each(function(index, el) {

        var w = 200;
        var h = 200;
        var r = h / 2;
        d3.select(el).append("text").attr("text-anchor", "middle").style(
            "font-size", "28px").style("text-decoration", "bold").text(
            "Recommended");
        var color = d3.scale.ordinal().range(
            ["#ffe5ff", "#ffeee5", "#d0743c", "#ff8c00"]);
        //GPVF
        var data = [{
            "label": "8",
            "value": string[index].values[0]
        }, {
            "label": "3",
            "value": string[index].values[1]
        }, {
            "label": "6",
            "value": string[index].values[2]
        }, {
            "label": "2",
            "value": string[index].values[3]
        }];

        var vis = d3.select(el).append("svg:svg").data([data]).attr(
            "width", w).attr("height", h).append("svg:g").attr("transform",
            "translate(" + r + "," + r + ")");
        var pie = d3.layout.pie().value(function(d) {
            return d.value;
        });

        // declare an arc generator function
        var arc = d3.svg.arc().outerRadius(r);

        // select paths, use arc generator to draw
        var arcs = vis.selectAll("g.slice").data(pie).enter().append("svg:g").attr("class", "slice");

        arcs.append("svg:path").attr({
            "fill": function(d, i) {
                return color(i);
            },
            "d": function(d) {
                console.log(arc(d));
                return arc(d);
            },
            'stroke': '#fff',
            'stroke-width': '3'
        });

        // add the text
        arcs.append("svg:text").attr({
            "transform": function(d) {
                d.innerRadius = 0;
                d.outerRadius = r;
                return "translate(" + arc.centroid(d) + ")";
            },
            "text-anchor": "middle"
        }).text(function(d, i) {
            return data[i].label;
        });

    });

})