0

我正在开发一个包含多项选择语言测试（英语和泰语）的 Joomla 2.5 网站。当通过鼠标单击选择项目时，使用 jQuery 计算正确百分比值并将其存储在全局变量中。每次单击鼠标后都会更新此变量。我的目标是在 d3 饼图中显示这些数据。我已经让饼图工作到它显示全局变量的初始值但它在值更新时没有响应的地步。. 按照以下建议：stackoverflow.com/questions/9063383/how-to-invoke-click-event-programmaticaly-in-d3 我安装了 d3Click 函数并在全局变量更新后放置了一个函数调用。

jQuery代码

var E2tw = {};
E2tw.clickCount = 0;
E2tw.clickCorrectCount = 10;
E2tw.percentCorrect = 0;  //  d3 code is accessing this variable initially but not its updates

jQuery(document).ready(function() {
    // function comes from 
  jQuery.fn.d3Click = function () {
    this.each(function (i, e) {
      var evt = document.createEvent("MouseEvents");
      evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
      e.dispatchEvent(evt);
      alert(evt);
    });
  };
// response to selection by click of correct response  - code for incorrect responses similar 
  jQuery("div#answers span.audio").click(function (evnt) {
            .....
      // code selecting audio files and various text highlighting indicating correct choice
            .....     
      E2tw.clickCount++;
      E2tw.clickCorrectCount++;
      E2tw.percentCorrect = ((E2tw.clickCorrectCount/E2tw.clickCount)*100).toFixed(0);
      jQuery("span#data").html(E2tw.percentCorrect);  // displays results in a box, temporary
      jQuery("d3.svg").d3Click();    // this doesn't work
      audioElement.load();    
      audioElement.play();
      E2tw.audioIsPlaying = true;
      audioElement.addEventListener("ended", function() {
        E2tw.audioIsPlaying = false;    
      }); 
     };  
    };
  });
}

饼图的d3代码

// from "Interactive Data Visualization" chptr 11 Scott Murray
//Width and height
var w = 150;
var h = 150;
 //E2tw.percentCorrect jquery global variable 
var dataset = [E2tw.percentCorrect, (100 - E2tw.percentCorrect)];  
var outerRadius = w/2;
var innerRadius = w/5;
var arc = d3.svg.arc()
    .innerRadius(innerRadius)
    .outerRadius(outerRadius);
var pie = d3.layout.pie();
//Easy colors accessible via a 10-step ordinal scale
var color = d3.scale.category10();
//Create SVG element
var svg = d3.select("div#innerBM103")
    .append("svg")
    .attr("width", w)
    .attr("height", h);     
//Set up groups
var arcs = svg.selectAll("g.arc")
    .data(pie(dataset))
    .enter()
    .append("g")
    .attr("class", "arc")
    .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")");           
            //Draw arc paths
arcs.append("path")
    .attr("fill", function(d, i) {
        return color(i);
    })
    .attr("d", arc);

d3Click 中没有显示提示它未被调用的警报。我不确定作为 d3Click 参数包含的正确 d3 元素是什么。我试过“d3.svg”和“svg”。任何帮助，将不胜感激。

4

0 回答 0