Question

我正在开发一个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中的警报未显示，表明未调用该警报。我不确定要包含哪个正确的d3元素作为d3Click参数。我试过“d3.svg”和“svg”。任何帮助将不胜感激。

如何将变量值从jQuery更新到d3

0 个答案: