javascript - 返回 Handlebars 辅助函数的 d3 对象

Question

我试图从handlebar.js辅助函数返回一个d3对象，以便我可以使用模板中函数生成的图表。 这是我的脚本:-

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

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


.barChart div {
    font: 10px sans-serif;
    text-align: right;
    padding: 5px;
    margin: 1px;
    color: white;
    width: 50%;
}


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

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

#bodyStats {
    color: black;
    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 class="barChart">{{recommendedBarChart}}</div></td>

    </tr>
    <tr>

        <td><div id="chart">{{foods}}</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="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script>
<script>

 $(document).ready(function (){

     Handlebars.registerHelper("foods", function() {
        return recommendedFoods(); 
     });
     function recommendedFoods() {
            var w = 50;
            var h = 50;
            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" : 25
            }, {
                "label" : "3",
                "value" : 25
            }, {
                "label" : "6",
                "value" : 25
            }, {
                "label" : "2",
                "value" : 25
            } ];

            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) {
                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;
            });
        }
     Handlebars.registerHelper("recommendedBarChart", function() {
            return recommendedBarChart();
     });
            function recommendedBarChart() {

                var data = [ {
                    "label" : "You ",
                    "value" : 60
                }, {
                    "label" : " Recommended",
                    "value" : 60
                }, {
                    "label" : "Peers",
                    "value" : 40
                } ];
                var color = d3.scale.ordinal().range(
                        [ "#8BA870", "#000000", "#FF8040", "#ff8c00" ]);

                var x = d3.scale.linear().domain([ 0, 1000 ]).range([ 0, 1000 ]);
                var height = 20;

                d3.select(".barChart").append("text").attr("x", (100 / 2)).attr("y",
                        0 - (50 / 2)).attr("text-anchor", "middle").style("font-size",
                        "28px").style("text-decoration", "bold").text(
                        "MODERATE/VIGOROUS INTENSITY (MIN/DAY)");

                 d3.select(".barChart").selectAll("div").data(data).enter()
                        .append("div").style("width", "1px").style("height",
                                height * 2 + "px").style("padding-top", "0.1px").style(
                                "padding", "0.1px").style("background-color", "black")

                        .append("div").style({
                            stroke : "black",
                            "stroke-width" : "2px"
                        }).style("height", function(d) {
                            return height + "px";
                        }).style("font-size", "20px").style("margin-top", "10px")
                        .style("text-align", "left").style("width", function(d) {
                            return (d.value + 100) + "px";
                        }).style("background-color", function(d, i) {
                            return color(i);
                        }).text(function(d, i) {
                            return data[i].label;
                        }).append("p").style("margin-top", function(d) {
                            return -height - 5 + "px";
                        }).style("margin-left", function(d) {
                            return (d.value + 100) + 10 + "px";
                        })

                        .style("color", "black").text(function(d) {
                            return d.value
                        });
            }

     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>

任何人都可以帮助我从两个 JavaScript 方法返回什么，以便可以使用模板显示它们吗？

Answer 1

实际显示图表的最简单方法就是调用 recommendedBarChart() $("#test").html(ht);之后

例如:

var ht = template(string);
$("#test").html(ht);
recommendedBarChart();

您无法调用 recommendedBarChart()之前，之前 D3 没有可以使用的 DOMElement。

如果您想定位多个元素，请使用 d3.selectAll(".barChart")