使用 Dimple JS 单击系列时从数据集中获取 ID

Question

我有一个用 Dimple.js 创建的饼图，其数据集具有以下结构：Id、值、文本。

我可以很好地显示饼图。

我无法开始工作的是单击一块馅饼并获取该块的 ID。我需要它来将用户导航到具有此 ID 的另一个页面。这怎么可能？

这是我的代码。

var svg = dimple.newSvg("#PieChart", "100%", "300px");
var data = [
   {"Id":1, "Value":10, "Text":"Apples"},
   {"Id":2, "Value":15, "Text":"Oranges"},
   {"Id":3, "Value":20, "Text":"Pears"}];
var myChart = new dimple.chart(svg, data);
myChart.addMeasureAxis("p", "Value");
var mySeries = myChart.addSeries("Text", dimple.plot.pie);
mySeries.addEventHandler("click", function (e) {
   alert("I want the Id.");
});
myChart.draw();

这是一个Fiddle

Answer 1

我认为没有任何直接的方法。这是我尝试过的方法，也许这可以帮助您度过难关

mySeries.addEventHandler("click", function (e) {
      var key = d3.select(e.selectedShape[0][0]).data()[0].aggField
[0];//get the text on which it is clicked
    //find the text from the data array
        var value = data.find(function(d){ return d.Text == key});
        //value has everything
    alert("I got the Id " + value.Id);
});

工作代码here

使用 Dimple JS 单击系列时从数据集中获取 ID

Get ID from dataset when clicking on a series using Dimple JS

javascript

d3.js

pie-chart

dimple.js