将d3脚本添加到div

时间:2015-03-25 17:24:27

标签: html d3.js

我有不同的<div>,我试图加入一些d <script>

这是我的div

<div id="pagepiling">
    <div id = "frequence" class="section" id="section1"></div>  
    <div id = "menu" class="section" id="section2"></div>
    <div class="section" id="section3"></div>
    <div class="section" id="section4"></div>
</div>

这里我的d3代表#frequence

<script>
        var frequ = [];

        d3.xml("database_menus.xml", "application/xml", function(xml) {
            var dataset = [];
            var data = xml.documentElement,
                sections = data.getElementsByTagName("menubar");
            for (var i = 0, lenS = sections.length; i < lenS; i++) {    
                nom = sections[i].getAttribute("appname");
                dataset.push(nom);
                frequ[nom] = (Math.random()*20)+15; 
            }

            var fill = d3.scale.category20b();
            var width  = window.innerWidth,
                height = window.innerHeight;


            d3.layout.cloud().size([width,height])
                .words(dataset.map(function(d) {return {text: d, size: frequ[d]}}))
                .padding(5)
                .rotate(function() { return ~~(Math.random() * 2)})
                .font("Impact")
                .fontSize(function(d) { return d.size; })
                .on("end", draw)
                .start();


            function draw(words) {
                words.sort(compare);
                var text = d3.select("#frequence").append("svg")
                .attr("width", width)
                .attr("height", height)
                .attr("x", 500)
                .append("g")
                .attr("transform", "translate("+(width/2)+","+(height/2)+")")
                .selectAll("text")
                .data(words)        
                .enter().append("text")
                .style("font-size", function(d) { return d.size + "px"; })
                .style("font-family", "Berlin Sans Fb")
                .style("fill", function(d, i) { return fill(i); })
                .attr("text-anchor", "middle")
                .style("text-anchor", "middle")
                .on("click", function(d){ var url ='strt_visu_boxes.html?app=';
                                //modifier " " en "_"
                                var t ="";
                                for (var i=0; i<d.text.length;i++){
                                    if (d.text[i]==" "){
                                        t += "_";
                                    } else {
                                        t += d.text[i]; 
                                    }
                                }                                   
                                url += t;
                                //window.location = url;    
                                })
                .on("mouseover", function(d) { 

                        d3.select(this).style("font-size", function(d) { 
                            if (d.size>20){
                                return d.size*1.5 + "px";
                            } else {
                                return d.size*2 + "px";
                        } })})

                .on("mouseout", function(d) { d3.select(this).style("font-size", function(d) { return d.size + "px"; })})               
                .text(function(d) { return d.text; });

                //fly-in animation
                text.transition().duration(3000).attr("transform", function(d) {return "translate(" + [d.x, d.y]  + ")";}).ease("elastic")

            }


            function mouseover() {
                 d3.select(this).select("circle").transition()
                .duration(750)
                .style("font-size", 50);
                 }

            function mouseout() {
                 d3.select(this).select("circle").transition()
                .duration(750)
                .style("font-size", 10);
            }

            function compare(a,b) {
                if (a.text < b.text)
                        return -1;
                if (a.text > b.text)
                    return 1;
                return 0;
            }


            });
</script>

我看不出我做错了什么...... (我的代码按此顺序排列..)

0 个答案:

没有答案