如何在同一个HTML中多次调用JS函数

这是我用于调用两个块（在两个div标签中）的相同js函数的代码。第二个标签（div id =“frame4”）的答案也会打印在第一个标签（div id =“frame3”）内。我想单独打印它们。我怎样才能做到这一点？为函数如何在同一个HTML中多次调用JS函数

function dsPieChart(x){ 
    var formatAsPercentage = d3.format("%") ; 
    var dataset = [ 
     {category: "", measure:x }, 
     {category: "", measure:(100-x)}, 

    ] 
    ; 

    var width = 100, 
     height = 100, 
     outerRadius = Math.min(width, height)/2, 
     innerRadius = outerRadius * .9, 
     // for animation 
     innerRadiusFinal = outerRadius * .8, 
     innerRadiusFinal3 = outerRadius* .7, 
     color = d3.scale.category20b() //builtin range of colors 
     ; 

    var vis = d3.select("#pieChart") 
     .append("svg:svg")    //create the SVG element inside the <body> 
     .data([dataset])     //associate our data with the document 
      .attr("width", width)   //set the width and height of our visualization (these will be attributes of the <svg> tag 
      .attr("height", height) 
      .append("svg:g")    //make a group to hold our pie chart 
      .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")") //move the center of the pie chart from 0, 0 to radius, radius 
      ; 

    var arc = d3.svg.arc()    //this will create <path> elements for us using arc data 
      .outerRadius(outerRadius).innerRadius(innerRadius); 

    // for animation 
    var arcFinal = d3.svg.arc().innerRadius(innerRadiusFinal).outerRadius(outerRadius); 
    var arcFinal3 = d3.svg.arc().innerRadius(innerRadiusFinal3).outerRadius(outerRadius); 

    var pie = d3.layout.pie()   //this will create arc data for us given a list of values 
      .value(function(d) { return d.measure; }); //we must tell it out to access the value of each element in our data array 

    var arcs = vis.selectAll("g.slice")  //this selects all <g> elements with class slice (there aren't any yet) 
      .data(pie)       //associate the generated pie data (an array of arcs, each having startAngle, endAngle and value properties) 
      .enter()       //this will create <g> elements for every "extra" data element that should be associated with a selection. The result is creating a <g> for every object in the data array 
       .append("svg:g")    //create a group to hold each slice (we will have a <path> and a <text> element associated with each slice) 
       .attr("class", "slice") //allow us to style things in the slices (like text) 
       .on("mouseover", mouseover) 
       .on("mouseout", mouseout) 
       .on("click", up) 
       ; 

      arcs.append("svg:path") 
       .attr("fill", function(d, i) { return color(i); }) //set the color for each slice to be chosen from the color function defined above 
       .attr("d", arc)  //this creates the actual SVG path using the associated data (pie) with the arc drawing function 
      .append("svg:title") //mouseover title showing the figures 
      // .text(function(d) { return d.data.category + ": " + d.data.measure ; }); 
      .text(function(d) { return d.data.measure ; }); 

      d3.selectAll("g.slice").selectAll("path").transition() 
      .duration(750) 
      .delay(10) 
      .attr("d", arcFinal) 
      ; 
     // Add a label to the larger arcs, translated to the arc centroid and rotated. 

     arcs.filter(function(d) { return d.endAngle - d.startAngle > .2; }) 
      .append("svg:text") 
      .attr("dy", ".35em") 
      .attr("text-anchor", "middle") 
      .attr("transform", function(d) { return "translate(" + arcFinal.centroid(d) + ")rotate(" + angle(d) + ")"; }) 
      .text(function(d) { return d.data.category; }) 
      ; 
     // Computes the label angle of an arc, converting from radians to degrees. 
     function angle(d) { 
      var a = (d.startAngle + d.endAngle) * 90/Math.PI - 90; 
      return a > 90 ? a - 180 : a; 
     } 
     // Pie chart title 
     vis.append("svg:text") 
      .attr("dy", ".35em") 
      .attr("text-anchor", "middle") 
      .text(x +"%") 
      .attr("class","title") 
      ; 

    function mouseover() { 
     d3.select(this).select("path").transition() 
      .duration(750) 
       .attr("d", arcFinal3) 
       ; 
    } 

    function mouseout() { 
     d3.select(this).select("path").transition() 
      .duration(750) 
       //.attr("stroke","blue") 
       //.attr("stroke-width", 1.5) 
       .attr("d", arcFinal) 
       ; 
    } 

    function up(d, i) { 
      /* update bar chart when user selects piece of the pie chart */ 
      //updateBarChart(dataset[i].category); 
      updateBarChart(d.data.category, color(i)); 
      updateLineChart(d.data.category, color(i)); 

    } 
    }

来源

2015-08-23 Buddhika Kulathilaka

为了能够帮助您，我们需要知道dsPieChart的功能。您的代码看起来像是第二次正确调用该函数，所以问题必须发生在代码的其他部分。顺便说一句，您使用的是什么模板引擎？ –

该函数的参数是什么？是'dsPieChart（）'你正在谈论的函数，那么当你调用该函数时，它应该为frame3和frame4打印同样的东西，因为你正在传递相同的参数'<％= coverage％>'。 – Imran

dsPieChart（）用于d3w饼图使用d3 –

更改功能

<div id="frame3"> 

    <! ----pieChart ----- !> 
    <h5><i>Code Coverage</i></h5> 
     <div id="pieChart"></div> 
     <script type="text/javascript"> 


     dsPieChart(<%=coverage %>); 
     </script> 

    </div> 

    <!test_density !> 
    <div id="frame3"> 
    <div id="pieChart"></div> 
    <script type="text/javascript"> 


    dsPieChart(<%=density %>); 
     </script> 
    </div>

代码传递给元件ID第二个参数。

function dsPieChart(x, selectorId){

更改硬编码选择：

var vis = d3.select("#pieChart");

要

var vis = d3.select("#" + selectorId);

然后当你调用该函数也排在第二paramater标识id选择。请注意，元素ID在页面中必须是唯一的：

<div id="pieChart-1"></div> 
<script type="text/javascript"> 
    dsPieChart(<%=coverage %>, 'pieChart-1'); 
    </script> 
</div> 

<div id="pieChart-2"></div> 
<script type="text/javascript"> 
    dsPieChart(<%=density %>, 'pieChart-2'); 
    </script> 
</div>

来源

2015-08-23 20:24:39 charlietfl

如何在同一个HTML中多次调用JS函数

回答

相关问题